/* ═══════════════════════════════════════════════════════════════════════════
Startseite, Fassung 20.09.2026 (templates/startseite.php, Klasse .ldc-v3)
Lädt NACH startseite.css und ergänzt es: die Bausteine, die bleiben
(Karussell, dunkler Block, Pillen, Überschriften), stehen dort; hier stehen
der neue Hero, die Leistungen, der Browserrahmen, der Ablauf, der Leitsatz
und der Anfrageblock - und die eine Layoutbreite.
Breite: 1320 px Inhalt + 24 px Rand je Seite. Dieselben Zahlen stehen in
rahmen.css für Kopf und Fuß. Wer eine ändert, ändert beide.
Bewegung: eine Kurve (schweres Ausrollen), siehe --v3-kurve.
═══════════════════════════════════════════════════════════════════════════ */
.ldc-v3 {
--v3-kurve: cubic-bezier(.32, .72, 0, 1);
--v3-r: 28px;
}
/* --ld-breite und --ld-rand kommen aus rahmen.css (dort auch die Stufen für große Bildschirme) */
.ldc-v3 { overflow-x: clip; } /* das Karussell ragt rechts hinaus, die Seite schneidet es ab */
.ldc-v3 .ldc-innen { max-width: calc(var(--ld-breite, 1320px) + 2 * var(--ld-rand, 24px)); padding: 0 var(--ld-rand, 24px); }
.ldc-v3 .ldc-abschnitt { padding: 120px 0; }
/* Symbolplaketten sind Kreise. In Spalten-Flexboxen wurden sie gestaucht
(Marcel, 20.09.2026: „die Hintergründe nicht abgerundet"). */
.ldc-v3 .ldc-plakette { flex: none; width: 46px; height: 46px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.ldc-v3 .ldc-plakette svg { width: 20px; height: 20px; }
.ldc-v3 .ldc-erledigt { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinte); color: #fff; }
.ldc-v3 .ldc-erledigt svg { width: 12px; height: 12px; }
/* ═══ Hero ═══════════════════════════════════════════════════════════════ */
.ldc-h { padding: 156px 0 0; }
.ldc-h-marke {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px 8px 12px; border-radius: 999px;
background: var(--karte); font-size: .875rem; font-weight: 600; color: var(--tinte);
}
.ldc-h-marke span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px rgba(31, 177, 251, .18); }
.ldc-v3 .ldc-h-titel {
margin: 26px 0 0;
font-size: clamp(2.9rem, 7.4vw, 7.25rem);
font-weight: 600; letter-spacing: -.045em; line-height: 1.02;
max-width: 13ch;
}
.ldc-h-zeile {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end;
margin-top: 40px;
}
.ldc-h-unter { font-size: 1.25rem; line-height: 1.6; color: var(--tinte-leise); max-width: 50ch; }
.ldc-h-aktionen { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* Hauptknopf: Pille mit eigenem Pfeilkreis, der beim Überfahren mitgeht */
.ldc .ldc-knopf {
display: inline-flex; align-items: center; gap: 14px;
min-height: 60px; padding: 0 8px 0 28px; border-radius: 999px;
background: var(--tinte); color: #fff;
font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em;
transition: background .35s var(--v3-kurve), transform .35s var(--v3-kurve), box-shadow .35s var(--v3-kurve);
}
.ldc .ldc-knopf i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .45s var(--v3-kurve), background .35s var(--v3-kurve); }
.ldc .ldc-knopf svg { width: 18px; height: 18px; }
.ldc .ldc-knopf:hover { background: var(--marke); box-shadow: 0 18px 36px -18px rgba(0, 62, 93, .7); }
.ldc .ldc-knopf:hover i { transform: translate(2px, -2px) scale(1.06); background: rgba(255, 255, 255, .24); }
.ldc .ldc-knopf:active { transform: scale(.97); }
.ldc .ldc-textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 700; color: var(--tinte); }
.ldc .ldc-textlink svg { width: 16px; height: 16px; transition: transform .35s var(--v3-kurve); }
.ldc .ldc-textlink:hover svg { transform: translateX(4px); }
/* Das Foto: zoomt beim Scrollen von 88 % auf volle Breite (szenen.js setzt
--zoom von 0 bis 1). Ohne Skript steht es in voller Größe. */
.ldc-h-band { padding: 72px var(--ld-rand, 24px) 0; }
.ldc-h-bild {
--zoom: 1;
position: relative; max-width: var(--ld-breite, 1320px); margin: 0 auto;
aspect-ratio: 16 / 8; overflow: hidden;
border-radius: var(--v3-r);
transform: scale(calc(.88 + .12 * var(--zoom)));
transform-origin: 50% 0;
will-change: transform;
background: var(--karte);
}
.ldc-h-bild > img { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; transform: translateY(calc(-13% * var(--zoom))); will-change: transform; }
.ldc-h-karte {
position: absolute; bottom: 24px;
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-radius: 20px; padding: 18px 22px;
box-shadow: 0 24px 50px -24px rgba(10, 23, 32, .45);
}
.ldc-h-karte-links { left: 24px; display: flex; align-items: center; gap: 14px; max-width: 340px; }
.ldc-h-karte-symbol { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: #fff; }
.ldc-h-karte-symbol svg { width: 17px; height: 17px; }
.ldc-h-karte-links p { font-size: .875rem; line-height: 1.45; color: var(--tinte-leise); }
.ldc-h-karte-links b { display: block; font-size: 1rem; font-weight: 700; color: var(--tinte); letter-spacing: -.01em; }
.ldc .ldc-h-karte-rechts { right: 24px; display: flex; gap: 30px; padding: 18px 28px; }
.ldc-h-karte-rechts li { display: grid; gap: 2px; }
.ldc-h-karte-rechts b { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ldc-h-karte-rechts li > span { font-size: .8125rem; color: var(--tinte-leise); font-weight: 600; }
/* ═══ Leistungen ═════════════════════════════════════════════════════════ */
.ldc-dienste { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: stretch; }
.ldc-dienste-liste { display: flex; flex-direction: column; justify-content: center; }
.ldc-dienst { position: relative; }
.ldc-dienst button {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
width: 100%; padding: 26px 0; border: 0; background: none; cursor: pointer; text-align: left;
font: inherit; font-size: clamp(1.5rem, 2.3vw, 2.125rem); font-weight: 600; letter-spacing: -.03em;
color: var(--tinte-still);
transition: color .4s var(--v3-kurve);
}
.ldc-dienst button svg { width: 22px; height: 22px; flex: none; opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--v3-kurve), transform .4s var(--v3-kurve); }
.ldc-dienst button:hover { color: var(--tinte); }
.ldc-dienst button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 8px; }
.ldc-dienst.ist-an button { color: var(--tinte); }
.ldc-dienst.ist-an button svg { opacity: 1; transform: none; }
/* aufklappen ohne Höhenangabe: die Rasterzeile geht von 0fr auf 1fr */
.ldc-dienst-mehr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--v3-kurve); }
.ldc-dienst-mehr > div { overflow: hidden; }
.ldc-dienst.ist-an .ldc-dienst-mehr { grid-template-rows: 1fr; }
.ldc-dienst-mehr p { font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-leise); max-width: 46ch; }
.ldc-dienst-mehr .ldc-pille { margin: 18px 0 28px; }
.ldc-dienst-linie { display: block; height: 2px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.ldc-dienst-linie b { display: block; height: 100%; width: 100%; background: var(--tinte); transform: scaleX(0); transform-origin: 0 50%; }
.ldc-dienst.ist-an .ldc-dienst-linie b { animation: ldcDienstLinie var(--dauer, 6s) linear forwards; }
.ldc-dienste.ist-still .ldc-dienst.ist-an .ldc-dienst-linie b { animation-play-state: paused; }
@keyframes ldcDienstLinie { to { transform: scaleX(1); } }
.ldc-dienste-buehne { position: relative; min-height: 560px; border-radius: var(--v3-r); overflow: hidden; background: var(--karte); }
.ldc-dienstbild { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--v3-kurve); }
.ldc-dienstbild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--v3-kurve); }
.ldc-dienstbild.ist-an { clip-path: inset(0); z-index: 1; }
.ldc-dienstbild.ist-an img { transform: none; }
.ldc-dienstbild.war-an { clip-path: inset(0); z-index: 0; }
/* ═══ Referenzen im Browserrahmen ════════════════════════════════════════ */
.ldc-ref { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding: 44px 0; }
.ldc-ref + .ldc-ref { border-top: 1px solid var(--linie); }
.ldc-ref:nth-of-type(even) .ldc-geraet { order: -1; }
.ldc-ref h3 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: 14px; }
.ldc-ref .ldc-lead { max-width: 44ch; }
.ldc-geraet {
border-radius: 18px; overflow: hidden; background: #fff;
box-shadow: 0 0 0 1px rgba(10, 23, 32, .08), 0 40px 80px -40px rgba(10, 23, 32, .35);
}
.ldc-geraet-leiste { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; background: #f4f5f6; border-bottom: 1px solid rgba(10, 23, 32, .06); }
.ldc-geraet-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d4d7da; }
.ldc-geraet-leiste span { margin: 0 auto; padding: 4px 18px; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 600; color: var(--tinte-leise); transform: translateX(-22px); }
.ldc-geraet-fenster { --rolle: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--karte); }
.ldc-geraet-fenster img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(calc(var(--rolle) * -1px)); will-change: transform; }
/* ═══ Ablauf ═════════════════════════════════════════════════════════════ */
.ldc .ldc-weg { --weg: 0; list-style: none; margin: 0; padding-left: 0; padding-right: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 56px; counter-reset: none; }
.ldc-weg-linie { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.ldc-weg-linie b { display: block; height: 100%; background: var(--tinte); transform: scaleX(var(--weg)); transform-origin: 0 50%; }
.ldc-weg-schritt, .ldc-weg-linie { list-style: none; }
.ldc-weg-schritt { position: relative; }
.ldc-weg-nr {
position: absolute; top: -56px; left: 0;
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
background: #fff; color: var(--tinte-still);
box-shadow: inset 0 0 0 2px var(--linie);
font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums;
transition: background .5s var(--v3-kurve), color .5s var(--v3-kurve), box-shadow .5s var(--v3-kurve), transform .5s var(--v3-kurve);
}
.ldc-weg-schritt h3 { font-size: 1.375rem; letter-spacing: -.025em; margin-bottom: 10px; color: var(--tinte-still); transition: color .5s var(--v3-kurve); }
.ldc-weg-schritt p { font-size: 1rem; line-height: 1.65; color: var(--tinte-still); transition: color .5s var(--v3-kurve); }
.ldc-weg-schritt.ist-an .ldc-weg-nr { background: var(--tinte); color: #fff; box-shadow: inset 0 0 0 2px var(--tinte); transform: scale(1.08); }
.ldc-weg-schritt.ist-an h3 { color: var(--tinte); }
.ldc-weg-schritt.ist-an p { color: var(--tinte-leise); }
/* ohne Skript: alles an */
html:not(.ldc-bewegt) .ldc-weg { --weg: 1; }
html:not(.ldc-bewegt) .ldc-weg-schritt h3 { color: var(--tinte); }
html:not(.ldc-bewegt) .ldc-weg-schritt p { color: var(--tinte-leise); }
/* ═══ Leitsatz ═══════════════════════════════════════════════════════════ */
.ldc-leitsatz { font-size: clamp(1.75rem, 3.6vw, 3.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.18; max-width: 24ch; max-width: min(100%, 1100px); color: var(--tinte); text-wrap: balance; }
.ldc-leitsatz .ldc-lw { color: var(--tinte); opacity: .16; transition: opacity .35s linear; }
.ldc-leitsatz .ldc-lw.ist-an { opacity: 1; }
/* ═══ Anfrage ════════════════════════════════════════════════════════════ */
.ldc-anfrage-block { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 64px 56px; }
.ldc .ldc-anfrage-punkte { display: grid; gap: 12px; margin: 30px 0 34px; }
.ldc-anfrage-punkte li { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, .86); }
.ldc-anfrage-punkte svg { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--akzent); }
.ldc-anfrage-oder { font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .5); margin-bottom: 2px; }
/* ═══ Schmale Bildschirme ════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.ldc-v3 .ldc-abschnitt { padding: 88px 0; }
.ldc-h { padding-top: 132px; }
.ldc-h-zeile { grid-template-columns: 1fr; gap: 28px; }
.ldc-dienste { grid-template-columns: 1fr; gap: 32px; }
.ldc-dienste-buehne { min-height: 0; aspect-ratio: 3 / 2; order: -1; }
.ldc-ref { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
.ldc-ref:nth-of-type(even) .ldc-geraet { order: 0; }
.ldc .ldc-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 32px; }
.ldc-weg-linie { display: none; }
.ldc-anfrage-block { grid-template-columns: 1fr; gap: 36px; padding: 48px 36px; }
}
@media (max-width: 720px) {
.ldc-v3 .ldc-abschnitt { padding: 68px 0; }
.ldc-h { padding-top: 112px; }
.ldc-h-unter { font-size: 1.0625rem; }
.ldc .ldc-knopf { min-height: 54px; padding-left: 22px; }
.ldc .ldc-knopf i { width: 38px; height: 38px; }
.ldc-h-band { padding-top: 44px; }
.ldc-h-bild { aspect-ratio: 4 / 5; border-radius: 22px; }
.ldc-h-karte { border-radius: 16px; }
.ldc-h-marke { align-items: flex-start; border-radius: 16px; font-size: .8125rem; line-height: 1.4; }
.ldc-h-marke span { margin-top: 5px; }
.ldc-h-karte-links { left: 12px; right: 12px; bottom: 106px; max-width: none; }
.ldc .ldc-h-karte-rechts { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.ldc-h-karte-rechts b { font-size: 1.375rem; }
.ldc-dienst button { padding: 20px 0; }
.ldc-ref h3 { font-size: 1.5rem; }
.ldc .ldc-weg { grid-template-columns: 1fr; gap: 64px; }
.ldc-anfrage-block { padding: 32px 18px 22px; border-radius: 22px; }
}
/* ═══ Weniger Bewegung ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.ldc-h-bild { transform: none; }
.ldc-h-bild > img { transform: none; height: 100%; }
.ldc-dienstbild, .ldc-dienstbild img, .ldc-dienst-mehr { transition: none; }
.ldc-dienst.ist-an .ldc-dienst-linie b { animation: none; transform: scaleX(1); }
.ldc-geraet-fenster img { transform: none; }
.ldc-leitsatz .ldc-lw { opacity: 1; }
.ldc .ldc-weg { --weg: 1; }
.ldc-weg-schritt h3 { color: var(--tinte); }
.ldc-weg-schritt p { color: var(--tinte-leise); }
}
/* ═══ Große Bildschirme ══════════════════════════════════════════════════ */
@media (min-width: 1800px) {
.ldc-v3 { font-size: 16.5px; }
.ldc-v3 .ldc-kk { height: 500px; }
.ldc-dienste-buehne { min-height: 640px; }
}
@media (min-width: 2300px) {
.ldc-v3 { font-size: 18px; }
.ldc-v3 .ldc-kk { height: 540px; }
.ldc-dienste-buehne { min-height: 700px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Hero-Varianten (20.09.2026, templates/teile/hero.php)
Gemeinsam: konkrete Überschrift in lesbarer Größe (kein Plakat mehr),
Google-Badge, Kennzahl, Logoreihe darunter.
═══════════════════════════════════════════════════════════════════════════ */
.ldc-h-1, .ldc-h-2, .ldc-h-3 { padding: 148px 0 0; }
.ldc-v3 .ldc-h-1 .ldc-h-titel, .ldc-v3 .ldc-h-2 .ldc-h-titel {
font-size: clamp(2.4rem, 4.2vw, 4.25rem); letter-spacing: -.04em; line-height: 1.06; max-width: 15ch; margin-top: 22px;
}
.ldc-h-1 .ldc-h-unter, .ldc-h-2 .ldc-h-unter { margin-top: 26px; font-size: 1.1875rem; max-width: 46ch; }
.ldc-h-1 .ldc-h-aktionen, .ldc-h-2 .ldc-h-aktionen { margin-top: 34px; }
.ldc-h-belege { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.ldc-h-beleg { display: grid; gap: 1px; }
.ldc-h-beleg b { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ldc-h-beleg > span { font-size: .875rem; font-weight: 600; color: var(--tinte-leise); }
/* ── Google-Badge: die Sterne füllen sich nacheinander, sobald es erscheint ── */
.ldc .ldc-gbadge {
display: inline-flex; align-items: center; gap: 14px;
padding: 12px 14px 12px 16px; border-radius: 18px; background: #fff; color: var(--tinte);
box-shadow: 0 0 0 1px rgba(10, 23, 32, .08), 0 18px 40px -22px rgba(10, 23, 32, .35);
transition: transform .4s var(--v3-kurve), box-shadow .4s var(--v3-kurve);
}
.ldc .ldc-gbadge:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(10, 23, 32, .1), 0 26px 50px -24px rgba(10, 23, 32, .45); }
.ldc-gbadge-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--karte); }
.ldc-gbadge-logo svg { width: 22px; height: 22px; }
.ldc-gbadge-mitte { display: grid; gap: 2px; }
.ldc-gbadge-zeile { display: flex; align-items: center; gap: 10px; }
.ldc-gbadge-zeile b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ldc-gbadge-sterne { display: inline-flex; gap: 2px; color: #f5a623; }
.ldc-gbadge-sterne svg { width: 17px; height: 17px; }
.ldc-gbadge-unter { font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-gbadge-pfeil { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--karte); transition: transform .45s var(--v3-kurve), background .3s; }
.ldc-gbadge-pfeil svg { width: 14px; height: 14px; }
.ldc .ldc-gbadge:hover .ldc-gbadge-pfeil { transform: translate(2px, -2px); background: var(--karte-tief); }
.ldc-bewegt .ldc-gbadge-sterne svg { opacity: .18; transform: scale(.6); }
.ldc-bewegt .ldc-drin .ldc-gbadge-sterne svg, .ldc-bewegt .ldc-gbadge.ldc-drin .ldc-gbadge-sterne svg { animation: ldcStern .55s var(--v3-kurve) forwards; }
.ldc-gbadge-sterne svg:nth-child(1) { animation-delay: .7s !important; }
.ldc-gbadge-sterne svg:nth-child(2) { animation-delay: .82s !important; }
.ldc-gbadge-sterne svg:nth-child(3) { animation-delay: .94s !important; }
.ldc-gbadge-sterne svg:nth-child(4) { animation-delay: 1.06s !important; }
.ldc-gbadge-sterne svg:nth-child(5) { animation-delay: 1.18s !important; }
@keyframes ldcStern { 0% { opacity: .18; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
/* ── Variante 1 · Werkschau ─────────────────────────────────────────────── */
.ldc-h1-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.ldc-h1-schau { position: relative; padding: 46px 0 34px 0; }
.ldc-h1-geraet { border-radius: 22px; transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin: 0 50%; transition: transform 1.2s var(--v3-kurve); }
.ldc-h1-schau:hover .ldc-h1-geraet { transform: perspective(1600px) rotateY(-2deg) rotateX(0); }
.ldc-h1-geraet .ldc-geraet-leiste span { transform: none; font-size: .75rem; margin: 0 auto 0 14px; }
.ldc-schau { aspect-ratio: 16 / 11; }
/* Drei Kundenwebsites laufen nacheinander durch: jede scrollt langsam nach unten
und blendet dann zur nächsten über (27 s Runde, je 9 s versetzt). */
.ldc-schau img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; animation: ldcSchau 27s linear infinite; }
.ldc-schau img:nth-child(1) { animation-delay: 0s; }
.ldc-schau img:nth-child(2) { animation-delay: 9s; }
.ldc-schau img:nth-child(3) { animation-delay: 18s; }
@keyframes ldcSchau {
0% { opacity: 0; transform: translateY(0); }
2.5% { opacity: 1; transform: translateY(0); }
8% { opacity: 1; transform: translateY(0); }
31% { opacity: 1; transform: translateY(-58%); }
34.5% { opacity: 0; transform: translateY(-60%); }
100% { opacity: 0; transform: translateY(0); }
}
.ldc-h1-karte {
position: absolute; display: flex; align-items: center; gap: 14px;
padding: 16px 20px; border-radius: 18px; background: #fff;
box-shadow: 0 0 0 1px rgba(10, 23, 32, .06), 0 28px 60px -28px rgba(10, 23, 32, .5);
font-size: .875rem; line-height: 1.4; color: var(--tinte-leise); font-weight: 600;
animation: ldcSchweben 7s ease-in-out infinite;
}
.ldc-h1-karte b { display: block; font-size: .9375rem; color: var(--tinte); font-weight: 700; }
/* sitzt über der Rahmenleiste, nicht auf der Adresszeile (20.09.2026 in der Aufnahme gesehen) */
.ldc-h1-karte-oben { top: -8px; right: -18px; }
.ldc-h1-karte-unten { bottom: 0; left: -34px; animation-delay: -3.5s; }
.ldc-h1-karte-zahl { font-size: 2.25rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums; }
@keyframes ldcSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* ── Variante 2 · Foto auf Farbfläche ───────────────────────────────────── */
.ldc-h2-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.ldc-h2-bild { position: relative; padding: 0 0 44px 44px; }
.ldc-h2-bild i { position: absolute; left: 0; bottom: 0; width: 72%; height: 78%; border-radius: var(--v3-r); background: linear-gradient(160deg, #d9f1fe, #eef8ff); }
.ldc-h2-bild img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--v3-r); box-shadow: 0 40px 80px -40px rgba(10, 23, 32, .45); }
/* ── Variante 3 · Zahlen ────────────────────────────────────────────────── */
.ldc-v3 .ldc-h3-titel { font-size: clamp(2.6rem, 5.6vw, 5.5rem); max-width: 17ch; }
.ldc-h3-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 28px; align-items: end; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--linie); }
.ldc-h3-zahlen > div { display: grid; gap: 6px; }
.ldc-h3-zahlen b { font-size: clamp(3rem, 5.4vw, 5.25rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ldc-h3-zahlen > div > span { font-size: 1rem; font-weight: 600; color: var(--tinte-leise); }
/* ── Umschalter zum Vergleichen (nur mit ?hero= in der Adresse) ─────────── */
.ldc .ldc-h-wahl { position: fixed; left: 20px; bottom: 20px; z-index: 50; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .8125rem; font-weight: 700; box-shadow: 0 20px 40px -18px rgba(10, 23, 32, .6); }
.ldc-h-wahl span { padding: 0 8px 0 12px; opacity: .6; }
.ldc .ldc-h-wahl a { padding: 8px 14px; border-radius: 999px; color: #fff; }
.ldc .ldc-h-wahl a:hover { background: rgba(255, 255, 255, .12); }
.ldc .ldc-h-wahl a[aria-current] { background: #fff; color: var(--tinte); }
@media (max-width: 1100px) {
.ldc-h-1, .ldc-h-2, .ldc-h-3 { padding-top: 124px; }
.ldc-h1-raster, .ldc-h2-raster { grid-template-columns: 1fr; gap: 48px; }
.ldc-h1-geraet, .ldc-h1-schau:hover .ldc-h1-geraet { transform: none; }
.ldc-h1-karte-oben { right: 12px; }
.ldc-h1-karte-unten { left: 12px; }
.ldc-h2-bild { max-width: 520px; }
.ldc-h3-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ldc-h3-zahlen .ldc-gbadge { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 720px) {
.ldc-h-1, .ldc-h-2, .ldc-h-3 { padding-top: 108px; }
.ldc-h-belege { gap: 18px; margin-top: 30px; }
.ldc-h1-karte { padding: 12px 14px; font-size: .8125rem; }
.ldc-h1-karte-zahl { font-size: 1.75rem; }
.ldc-h3-zahlen { grid-template-columns: 1fr 1fr; margin-top: 44px; padding-top: 28px; }
.ldc .ldc-h-wahl { left: 12px; bottom: 12px; font-size: .75rem; }
.ldc .ldc-h-wahl a { padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-schau img { animation: none; }
.ldc-schau img:first-child { opacity: 1; }
.ldc-h1-karte { animation: none; }
.ldc-bewegt .ldc-gbadge-sterne svg { opacity: 1; transform: none; animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Farbe und Leben (20.09.2026, Marcel: „nicht immer das dunkle Blau, wir haben
doch den hellen blauen Verlauf im Logo"; „einfaches Schwarz bei den Knöpfen
finde ich nicht geil"; „die Hover sehen nicht gut aus")
Der Verlauf des Logos (Tiefblau -> Hellblau) trägt jetzt Knöpfe, Linien,
Akzente und die großen Blöcke. Text bleibt fast schwarz, damit er lesbar ist.
Hover-Regel für alles Klickbare: die Schriftfarbe ändert sich NIE (das Theme
färbte Links beim Überfahren hellblau, auf Blau unlesbar), es bewegen sich
Fläche, Schatten und Pfeil.
═══════════════════════════════════════════════════════════════════════════ */
.ldc-v3 {
--blau: #1fb1fb;
--blau-tief: #0a84c9;
--blau-hell: #7fdcff;
--v3-verlauf: linear-gradient(100deg, #0a84c9 0%, #1fb1fb 50%, #5fd0ff 100%);
--v3-nacht: radial-gradient(90% 130% at 100% 0%, rgba(31, 177, 251, .42), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(10, 132, 201, .35), transparent 65%), linear-gradient(140deg, #012f47, #024a73);
}
/* Das Theme färbt a:hover; auf der Startseite behält jeder Link seine Farbe */
.ldc-v3 a:hover, .ldc-v3 a:focus { color: inherit; }
/* ── Hauptknopf ─────────────────────────────────────────────────────────── */
.ldc .ldc-knopf, .ldc .ldc-knopf:hover, .ldc .ldc-knopf:focus { color: #fff; }
.ldc .ldc-knopf {
background: var(--v3-verlauf); background-size: 180% 100%; background-position: 0 0;
box-shadow: 0 14px 30px -16px rgba(10, 132, 201, .75);
transition: background-position .6s var(--v3-kurve), transform .35s var(--v3-kurve), box-shadow .35s var(--v3-kurve);
}
.ldc .ldc-knopf i { background: rgba(255, 255, 255, .22); }
.ldc .ldc-knopf:hover { background: var(--v3-verlauf); background-size: 180% 100%; background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(10, 132, 201, .9); }
.ldc .ldc-knopf:hover i { background: #fff; color: var(--blau-tief); transform: translate(2px, -2px); }
.ldc .ldc-knopf:active { transform: translateY(0) scale(.98); }
.ldc .ldc-textlink, .ldc .ldc-textlink:hover { color: var(--tinte); }
.ldc .ldc-textlink svg { color: var(--blau-tief); }
.ldc .ldc-textlink { background: linear-gradient(var(--blau), var(--blau)) 0 100% / 0 2px no-repeat; padding-bottom: 4px; transition: background-size .45s var(--v3-kurve); }
.ldc .ldc-textlink:hover { background-size: 100% 2px; }
/* Pillen: Schrift bleibt, Fläche und Pfeil reagieren */
.ldc .ldc-pille, .ldc .ldc-pille:hover { color: var(--tinte); }
.ldc .ldc-pille svg { color: var(--blau-tief); }
.ldc .ldc-pille:hover { background: #e3f4fe; }
.ldc .ldc-pille-voll, .ldc .ldc-pille-voll:hover { color: #fff; background: var(--v3-verlauf); background-size: 180% 100%; }
.ldc .ldc-pille-voll { transition: background-position .6s var(--v3-kurve), transform .35s var(--v3-kurve); }
.ldc .ldc-pille-voll:hover { background-position: 100% 0; transform: translateY(-2px); }
.ldc .ldc-pille-voll svg, .ldc .ldc-pille-hell svg { color: #fff; }
.ldc .ldc-pille-hell, .ldc .ldc-pille-hell:hover { color: #fff; }
.ldc .ldc-pille-hell:hover { background: rgba(255, 255, 255, .24); }
.ldc .ldc-kk-weiss, .ldc .ldc-kk-weiss:hover, .ldc .ldc-gbadge, .ldc .ldc-gbadge:hover, .ldc .ldc-telefon, .ldc .ldc-telefon:hover { color: inherit; }
.ldc .ldc-telefon, .ldc .ldc-telefon:hover { color: #fff; }
.ldc .ldc-eingabe, .ldc .ldc-eingabe:hover { color: #fff; }
/* ── Akzente ────────────────────────────────────────────────────────────── */
.ldc-h-marke { background: #e8f6fe; color: #06527e; }
.ldc-v3 .ldc-plakette { color: var(--blau-tief); }
.ldc-v3 .ldc-erledigt { background: var(--v3-verlauf); }
.ldc-dienst-linie b, .ldc-weg-linie b { background: var(--v3-verlauf); }
.ldc-dienst.ist-an button svg { color: var(--blau-tief); }
.ldc-weg-schritt.ist-an .ldc-weg-nr { background: var(--v3-verlauf); box-shadow: 0 10px 22px -10px rgba(10, 132, 201, .8); }
.ldc-h-karte-symbol { background: var(--v3-verlauf); }
.ldc-v3 .ldc-abzeichen { background: #e3f4fe; color: #06527e; }
.ldc-v3 .ldc-abzeichen-schwarz { background: var(--v3-verlauf); color: #fff; }
.ldc-leitsatz .ldc-lw.ist-an:nth-last-child(-n+5) { color: var(--blau-tief); } /* „… bleiben wir dran." */
/* ── Große Blöcke: Nachtblau mit Licht statt Fast-Schwarz ───────────────── */
.ldc-v3 .ldc-dunkel { background: var(--v3-nacht); }
.ldc-v3 .ldc-kk-schwarz { background: var(--v3-nacht); }
.ldc-v3 .ldc-kk-rahmen { background-image: linear-gradient(#fff, #fff), linear-gradient(160deg, #0a84c9, #1fb1fb 50%, #9be4ff); }
.ldc-v3 .ldc-anfrage-punkte svg { background: rgba(255, 255, 255, .14); color: var(--blau-hell); }
.ldc .ldc-karussell-pfeil:hover { background: var(--blau); color: #fff; }
/* ── Kundenlogos als Band ───────────────────────────────────────────────── */
.ldc-logos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 88px; padding-top: 34px; border-top: 1px solid var(--linie); }
.ldc-logos p { font-size: .9375rem; font-weight: 700; color: var(--tinte); margin: 0; max-width: 17ch; line-height: 1.35; }
.ldc-logoband { overflow: hidden; max-width: 980px; justify-self: end; width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ldc .ldc-logoband ul { display: flex; align-items: center; gap: 72px; width: max-content; animation: ldcLogoband var(--band-dauer, 38s) linear infinite; }
/* (Anhalten beim Überfahren entfernt, siehe Runde 12: Pause-Knopf) */
.ldc-logoband li { flex: none; display: grid; place-items: center; height: 48px; }
.ldc-logoband img { height: 38px; width: auto; max-width: none; opacity: .55; transition: opacity .4s var(--v3-kurve); }
.ldc-logoband li:hover img { opacity: 1; }
@keyframes ldcLogoband { to { transform: translateX(calc(-50% - 36px)); } }
/* ── Fragen: Akkordeon ──────────────────────────────────────────────────── */
.ldc-frage { background: var(--karte); border-radius: 18px; padding: 0 24px; transition: background .4s var(--v3-kurve), box-shadow .4s var(--v3-kurve); }
.ldc-frage.ist-offen { background: #fff; box-shadow: 0 0 0 1.5px rgba(31, 177, 251, .45), 0 24px 50px -30px rgba(10, 132, 201, .55); }
.ldc-frage h3 { margin: 0; font-size: inherit; }
.ldc-frage button {
display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
padding: 20px 0; border: 0; background: none; cursor: pointer; text-align: left;
font: inherit; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; color: var(--tinte);
}
.ldc-frage button:focus-visible { outline: 2px solid var(--blau); outline-offset: 4px; border-radius: 10px; }
.ldc-frage button i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; transition: background .4s var(--v3-kurve), transform .5s var(--v3-kurve); }
.ldc-frage button i::before, .ldc-frage button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--tinte); transform: translate(-50%, -50%); transition: transform .5s var(--v3-kurve), background .3s; }
.ldc-frage button i::after { transform: translate(-50%, -50%) rotate(90deg); }
.ldc-frage button:hover i { background: #e3f4fe; }
.ldc-frage.ist-offen button i { background: var(--blau); transform: rotate(180deg); }
.ldc-frage.ist-offen button i::before, .ldc-frage.ist-offen button i::after { background: #fff; }
.ldc-frage.ist-offen button i::after { transform: translate(-50%, -50%) rotate(0deg); }
.ldc-frage-antwort p { padding: 0 44px 22px 0; font-size: .9375rem; line-height: 1.7; color: var(--tinte-leise); max-width: 60ch; }
/* mit Skript: zu, bis offen; die Rasterzeile geht von 0fr auf 1fr, der Text blendet nach */
.ldc-fragen.ist-bereit .ldc-frage-antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--v3-kurve); }
.ldc-fragen.ist-bereit .ldc-frage-antwort > div { overflow: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--v3-kurve), transform .5s var(--v3-kurve); }
.ldc-fragen.ist-bereit .ldc-frage.ist-offen .ldc-frage-antwort { grid-template-rows: 1fr; }
.ldc-fragen.ist-bereit .ldc-frage.ist-offen .ldc-frage-antwort > div { opacity: 1; transform: none; transition-delay: .12s; }
/* ── Hero-Variante 4: Werkschau auf der Verlaufsfläche ──────────────────── */
.ldc-h-4 { padding: 140px 0 0; }
.ldc-v3 .ldc-h-4 .ldc-h-titel { font-size: clamp(2.4rem, 4.2vw, 4.25rem); letter-spacing: -.04em; line-height: 1.06; max-width: 15ch; margin-top: 22px; }
.ldc-h-4 .ldc-h-unter { margin-top: 26px; font-size: 1.1875rem; max-width: 46ch; }
.ldc-h-4 .ldc-h-aktionen { margin-top: 34px; }
.ldc-h4-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 64px; align-items: center; }
.ldc-h4-flaeche {
position: relative; overflow: hidden; border-radius: 36px; min-height: 600px;
padding: 84px 0 0 64px;
background: radial-gradient(80% 70% at 88% 8%, #9be6ff 0%, rgba(155, 230, 255, 0) 60%), linear-gradient(150deg, #0a84c9 0%, #1fb1fb 55%, #6fd6ff 100%);
}
.ldc-h4-glanz { position: absolute; left: -20%; top: 30%; width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent); animation: ldcGlanz 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes ldcGlanz { to { transform: translate(38%, -22%) scale(1.15); } }
.ldc-h4-geraet { position: relative; border-radius: 18px 0 0 0; box-shadow: 0 40px 90px -30px rgba(1, 47, 71, .65); margin-right: -2px; }
.ldc-h4-geraet .ldc-geraet-leiste span { transform: none; margin: 0 auto 0 14px; }
.ldc-h4-geraet .ldc-schau { aspect-ratio: 16 / 12.4; }
.ldc-h4-karte-oben { top: 22px; right: 22px; }
.ldc-h4-karte-unten { left: 22px; bottom: 26px; animation-delay: -3.5s; }
@media (max-width: 1100px) {
.ldc-h-4 { padding-top: 124px; }
.ldc-h4-raster { grid-template-columns: 1fr; gap: 44px; }
.ldc-h4-flaeche { min-height: 0; padding: 72px 0 0 32px; border-radius: 28px; }
.ldc-logos { grid-template-columns: 1fr; gap: 22px; }
.ldc-logos p { max-width: none; }
.ldc-logoband { justify-self: stretch; }
}
@media (max-width: 720px) {
.ldc-h-4 { padding-top: 108px; }
.ldc-h4-flaeche { padding: 92px 0 0 18px; border-radius: 24px; }
/* am Handy bricht die Adresszeile um und die Karte lag darauf: Zeile weg, Karte über den Rahmen */
.ldc-h4-geraet .ldc-geraet-leiste span, .ldc-h1-geraet .ldc-geraet-leiste span { display: none; }
.ldc-h4-karte-oben { top: 12px; right: 12px; }
.ldc-h4-karte-unten { left: 12px; bottom: 14px; }
.ldc-logos { margin-top: 56px; }
.ldc .ldc-logoband ul { gap: 48px; }
.ldc-logoband img { height: 30px; }
@keyframes ldcLogoband { to { transform: translateX(calc(-50% - 24px)); } }
.ldc-frage { padding: 0 18px; }
.ldc-frage button { font-size: 1rem; padding: 16px 0; }
.ldc-frage-antwort p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ldc .ldc-logoband ul { animation: none; flex-wrap: wrap; width: auto; gap: 28px 44px; }
.ldc-logoband li[aria-hidden] { display: none; }
.ldc-logoband { -webkit-mask-image: none; mask-image: none; }
.ldc-h4-glanz { animation: none; }
.ldc-fragen.ist-bereit .ldc-frage-antwort, .ldc-fragen.ist-bereit .ldc-frage-antwort > div { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Runde 5 (20.09.2026 nachts, Marcel)
· Blau sparsam: der Verlauf bleibt NUR auf dem Hauptknopf. Alles andere, was
bisher im Verlauf stand (Pillen, Häkchen, Linien, Schrittnummern, Symbole),
geht auf Dunkelblau zurück. „Das Blau sticht schon krass raus."
· Hero 5: Kacheln statt Website-Aufnahmen
· Projektraster 4:3 mit Überfahr-Infos und Fenster
· Kundenstimmen
· Fragen ohne Schatten
· Anfrage links: Kontaktwege
═══════════════════════════════════════════════════════════════════════════ */
.ldc .ldc-pille-voll, .ldc .ldc-pille-voll:hover { background: var(--tinte); }
.ldc .ldc-pille-voll:hover { background: var(--marke); }
.ldc-v3 .ldc-erledigt, .ldc-v3 .ldc-abzeichen-schwarz, .ldc-h-karte-symbol { background: var(--tinte); }
.ldc-dienst-linie b, .ldc-weg-linie b { background: var(--tinte); }
.ldc-weg-schritt.ist-an .ldc-weg-nr { background: var(--tinte); box-shadow: none; }
.ldc-dienst.ist-an button svg, .ldc .ldc-pille svg, .ldc .ldc-textlink svg { color: var(--tinte); }
.ldc .ldc-pille:hover { background: var(--karte-tief); }
.ldc .ldc-textlink { background-image: linear-gradient(var(--tinte), var(--tinte)); }
.ldc-h-marke { background: var(--karte); color: var(--tinte); }
.ldc-h-marke span { background: var(--blau); }
.ldc-leitsatz .ldc-lw.ist-an:nth-last-child(-n+5) { color: var(--tinte); }
.ldc .ldc-karussell-pfeil:hover { background: var(--tinte); color: #fff; }
/* Ruhiger zweiter Knopf (heller Grund, dunkle Schrift), z. B. „Alle Projekte" */
.ldc .ldc-knopf.ldc-knopf-ruhig, .ldc .ldc-knopf.ldc-knopf-ruhig:hover, .ldc .ldc-knopf.ldc-knopf-ruhig:focus { color: var(--tinte); }
.ldc .ldc-knopf.ldc-knopf-ruhig { background: var(--karte); box-shadow: none; }
.ldc .ldc-knopf.ldc-knopf-ruhig i { background: var(--tinte); color: #fff; }
.ldc .ldc-knopf.ldc-knopf-ruhig:hover { background: var(--karte-tief); box-shadow: none; transform: translateY(-2px); }
.ldc .ldc-knopf.ldc-knopf-ruhig:hover i { background: var(--tinte); color: #fff; }
/* ── Fragen: kein Schatten, kein blauer Ring ───────────────────────────── */
.ldc-frage.ist-offen { background: var(--karte); box-shadow: none; }
.ldc-frage.ist-offen button i { background: var(--tinte); }
.ldc-frage button:hover i { background: var(--karte-tief); }
/* ── Google-Abzeichen: die Anzahl zählt ────────────────────────────────── */
.ldc-gbadge-unter b { font-weight: 800; color: var(--tinte); }
.ldc-gbadge-sterne svg { width: 19px; height: 19px; }
/* ── Hero 5: Kacheln ───────────────────────────────────────────────────── */
.ldc-h5-raster { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center; }
.ldc-h5-kacheln { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto auto auto; gap: 16px; }
.ldc .ldc-h5-k, .ldc .ldc-h5-k:hover { color: var(--tinte); text-decoration: none; }
.ldc-h5-k { position: relative; display: block; border-radius: var(--v3-r); background: var(--karte); padding: 28px; overflow: hidden; }
.ldc-h5-klein { font-size: .8125rem; font-weight: 700; color: var(--tinte-leise); margin: 0 0 10px; }
.ldc-h5-zahl { display: block; font-size: clamp(3.5rem, 5.4vw, 5.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; margin: 0; font-variant-numeric: tabular-nums; }
.ldc-h5-zahl-klein { font-size: clamp(2.75rem, 3.8vw, 3.75rem); margin-top: 22px; }
.ldc-h5-text { display: block; font-size: .9375rem; line-height: 1.5; font-weight: 600; color: var(--tinte-leise); margin: 10px 0 0; max-width: 24ch; }
/* A · Kunden: dunkle Kachel über zwei Zeilen, rechts laufen die Logos senkrecht */
.ldc-h5-kunden { grid-row: span 2; min-height: 380px; background: var(--v3-nacht); padding-right: 46%; display: flex; flex-direction: column; justify-content: flex-end; }
.ldc .ldc-h5-kunden, .ldc-h5-kunden .ldc-h5-zahl { color: #fff; }
.ldc-h5-kunden .ldc-h5-klein, .ldc-h5-kunden .ldc-h5-text { color: rgba(255, 255, 255, .72); }
.ldc-h5-kunden .ldc-h5-klein { margin-bottom: auto; }
.ldc-h5-logos { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.ldc .ldc-h5-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 34px; animation: ldcLogosHoch 36s linear infinite; }
.ldc-h5-logos li { margin: 0; padding: 0 0 0; }
.ldc-h5-logos img { display: block; height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: invert(1); opacity: .82; }
@keyframes ldcLogosHoch { to { transform: translateY(calc(-50% - 17px)); } }
/* B · Google */
.ldc-h5-google { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); transition: transform .45s var(--v3-kurve), box-shadow .45s var(--v3-kurve); }
.ldc-h5-google:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(10, 23, 32, .22); }
.ldc-h5-google-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ldc-h5-pfeil { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--karte); transition: transform .45s var(--v3-kurve), background .3s; }
.ldc-h5-pfeil svg { width: 15px; height: 15px; }
.ldc-h5-google:hover .ldc-h5-pfeil { transform: translate(2px, -2px); background: var(--tinte); color: #fff; }
/* C · Wir bauen */
.ldc-h5-bauen { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.ldc-h5-wort { font-size: clamp(1.5rem, 2.1vw, 2.125rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 0; }
/* D · direkter Draht, über die ganze Breite */
.ldc-h5-draht { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 18px 24px; transition: background .4s var(--v3-kurve); }
.ldc-h5-draht:hover { background: var(--karte-tief); }
.ldc-h5-draht > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ldc-h5-draht b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ldc-h5-draht .ldc-h5-text { margin: 0; max-width: none; }
/* ── Projektraster ─────────────────────────────────────────────────────── */
.ldc-projekte { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ldc .ldc-projekt-kachel {
position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; cursor: pointer;
aspect-ratio: 4 / 3; border-radius: var(--v3-r); overflow: hidden; background: var(--karte);
font: inherit; color: #fff; text-align: left; box-shadow: none; min-height: 0; line-height: inherit; text-transform: none; letter-spacing: 0;
}
.ldc .ldc-projekt-kachel:hover, .ldc .ldc-projekt-kachel:focus { background: var(--karte); color: #fff; }
.ldc-projekt-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--v3-kurve); }
.ldc-projekt-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1, 25, 38, .0) 40%, rgba(1, 25, 38, .78)); opacity: 0; transition: opacity .5s var(--v3-kurve); }
.ldc-projekt-schilder { position: absolute; z-index: 1; left: 20px; top: 20px; right: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.ldc-projekt-schilder span { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--tinte); font-size: .8125rem; font-weight: 700; line-height: 1; opacity: 0; transform: translateY(-10px); transition: opacity .45s var(--v3-kurve), transform .55s var(--v3-kurve); }
.ldc-projekt-schilder span:nth-child(2) { transition-delay: .06s; }
.ldc-projekt-schilder span:nth-child(3) { transition-delay: .12s; }
.ldc-projekt-titel { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; font-size: clamp(1.375rem, 1.9vw, 1.875rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--v3-kurve), transform .6s var(--v3-kurve); }
.ldc-projekt-kachel:hover img, .ldc-projekt-kachel:focus-visible img { transform: scale(1.05); }
.ldc-projekt-kachel:hover::after, .ldc-projekt-kachel:focus-visible::after { opacity: 1; }
.ldc-projekt-kachel:hover .ldc-projekt-schilder span, .ldc-projekt-kachel:focus-visible .ldc-projekt-schilder span,
.ldc-projekt-kachel:hover .ldc-projekt-titel, .ldc-projekt-kachel:focus-visible .ldc-projekt-titel { opacity: 1; transform: none; }
.ldc-projekt-kachel:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.ldc-projekt-kachel:active img { transform: scale(1.02); }
/* der Kreis, der dem Zeiger folgt (szenen.js) */
.ldc-projekt-zeiger { position: absolute; z-index: 3; left: -46px; top: -46px; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--tinte); font-size: .875rem; font-weight: 800; letter-spacing: -.01em; pointer-events: none; opacity: 0; scale: .4; transition: opacity .35s var(--v3-kurve), scale .45s var(--v3-kurve); box-shadow: 0 18px 40px -18px rgba(1, 25, 38, .6); }
.ldc-projekt-zeiger.ist-da { opacity: 1; scale: 1; }
.ldc-projekte-fuss { display: flex; justify-content: center; margin-top: 40px; }
/* Fenster */
html.ldc-fenster-offen { overflow: hidden; }
.ldc .ldc-fenster { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--v3-r); background: #fff; color: var(--tinte); overflow: auto; }
.ldc-fenster[open] { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); animation: ldcFensterEin .6s var(--v3-kurve) both; }
.ldc-fenster::backdrop { background: rgba(1, 25, 38, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: ldcFensterGrund .4s ease both; }
@keyframes ldcFensterEin { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ldcFensterGrund { from { opacity: 0; } to { opacity: 1; } }
.ldc-fenster > img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.ldc-fenster-text { padding: 56px 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.ldc-fenster-text .ldc-fall-meta { margin: 0 0 22px; }
.ldc-fenster-text h3 { font-size: clamp(1.75rem, 2.4vw, 2.375rem); letter-spacing: -.04em; line-height: 1.08; margin: 0 0 16px; }
.ldc-fenster-text p { font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-leise); margin: 0; }
.ldc-fenster-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 30px; }
.ldc-fenster form { position: absolute; z-index: 2; top: 16px; right: 16px; margin: 0; }
.ldc .ldc-fenster-zu { display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--karte); color: var(--tinte); cursor: pointer; box-shadow: none; transition: background .3s var(--v3-kurve), transform .45s var(--v3-kurve); }
.ldc .ldc-fenster-zu:hover { background: var(--tinte); color: #fff; transform: rotate(90deg); }
.ldc-fenster-zu svg { width: 18px; height: 18px; }
/* ── Kundenstimmen (Gerüst der Leistungen, Bühne mit Text) ─────────────── */
.ldc-stimmen-wechsel .ldc-dienst button span { display: grid; gap: 4px; }
.ldc-stimmen-wechsel .ldc-dienst button small { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--tinte-still); }
.ldc-stimmen-wechsel .ldc-dienst button { font-size: clamp(1.25rem, 1.7vw, 1.625rem); padding: 20px 0; }
.ldc-stimmen-wechsel .ldc-dienste-buehne { min-height: 500px; }
.ldc-stimmbild { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 52px; background: var(--karte); }
.ldc-stimm-sterne { display: inline-flex; gap: 3px; color: #f5a623; }
.ldc-stimm-sterne svg { width: 24px; height: 24px; }
.ldc-stimmbild blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: clamp(1.25rem, 1.75vw, 1.75rem); font-weight: 600; font-style: normal; letter-spacing: -.025em; line-height: 1.38; color: var(--tinte); text-wrap: pretty; }
.ldc-stimmbild blockquote::before { content: none; }
.ldc-stimmbild figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: .9375rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-stimmbild figcaption img { height: 34px; width: auto; transform: none !important; object-fit: contain; }
.ldc-stimmbild figcaption b { font-size: 1.0625rem; font-weight: 800; color: var(--tinte); }
/* ── Anfrage links: Kontaktwege ────────────────────────────────────────── */
.ldc-wege { display: grid; margin: 36px 0 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.ldc .ldc-weg-zeile, .ldc .ldc-weg-zeile:hover { color: #fff; text-decoration: none; }
.ldc-weg-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid rgba(255, 255, 255, .16); transition: padding .45s var(--v3-kurve), background .45s var(--v3-kurve); border-radius: 0; }
.ldc-weg-zeile:hover { padding-left: 14px; padding-right: 14px; background: rgba(255, 255, 255, .06); }
.ldc-weg-symbol { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.ldc-weg-symbol svg { width: 23px; height: 23px; }
.ldc-weg-zeile small { display: block; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .7); margin-bottom: 3px; }
.ldc-weg-zeile b { display: block; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ldc-weg-zeile > svg { width: 18px; height: 18px; opacity: .55; transition: transform .45s var(--v3-kurve), opacity .3s; }
.ldc-weg-zeile:hover > svg { transform: translate(3px, -3px); opacity: 1; }
.ldc .ldc-wege-zeit { color: rgba(255, 255, 255, .72); margin: 0; }
.ldc-anfrage-block { align-items: start; }
@media (max-width: 1100px) {
.ldc-h5-raster { grid-template-columns: 1fr; gap: 40px; }
.ldc-fenster[open] { grid-template-columns: 1fr; }
.ldc-fenster > img { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
.ldc-fenster-text { padding: 32px 28px 30px; }
.ldc-stimmen-wechsel .ldc-dienste-buehne { aspect-ratio: auto; min-height: 460px; order: 0; }
.ldc-stimmbild { padding: 36px; }
}
@media (max-width: 700px) {
.ldc-projekte { grid-template-columns: 1fr; gap: 16px; }
/* ohne Zeiger gibt es kein Überfahren: Titel und Schilder stehen immer da */
.ldc-projekt-kachel::after { opacity: 1; }
.ldc-projekt-schilder span, .ldc-projekt-titel { opacity: 1; transform: none; }
.ldc-h5-kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
.ldc-h5-k { padding: 20px; border-radius: 22px; }
.ldc-h5-kunden { grid-column: 1 / -1; grid-row: auto; min-height: 250px; }
.ldc-h5-draht { padding: 14px 18px; }
.ldc-h5-pfeil { display: none; }
.ldc-stimmen-wechsel .ldc-dienste-liste { display: none; } /* am Handy wechselt die Stimme von selbst, die Liste wäre doppelt so lang wie der Inhalt */
.ldc-stimmen-wechsel .ldc-dienste-buehne { min-height: 520px; }
.ldc-stimmbild { padding: 26px 22px; }
.ldc-stimmbild blockquote { font-size: 1.125rem; }
}
@media (hover: none) {
.ldc-projekt-kachel::after { opacity: 1; }
.ldc-projekt-schilder span, .ldc-projekt-titel { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ldc .ldc-h5-logos ul, .ldc-fenster[open], .ldc-fenster::backdrop { animation: none; }
.ldc-projekt-kachel img, .ldc-projekt-schilder span, .ldc-projekt-titel, .ldc-weg-zeile { transition: none; }
}
/* Runde 5b: Nachbesserungen nach der Kontrolle */
.ldc-h5-kunden { padding-right: 28px; }
.ldc .ldc-h5-branchen { list-style: none; margin: 14px 0 auto; padding: 0 0 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.ldc-h5-kunden .ldc-h5-klein { margin-bottom: 0; }
.ldc-h5-branchen li { margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .8125rem; font-weight: 700; line-height: 1; color: #fff; }
.ldc-bewegt .ldc-h5-branchen li { opacity: 0; transform: translateY(10px) scale(.92); }
.ldc-bewegt .ldc-drin .ldc-h5-branchen li { animation: ldcBranche .6s var(--v3-kurve) forwards; }
.ldc-h5-branchen li:nth-child(1) { animation-delay: .55s !important; } .ldc-h5-branchen li:nth-child(2) { animation-delay: .63s !important; }
.ldc-h5-branchen li:nth-child(3) { animation-delay: .71s !important; } .ldc-h5-branchen li:nth-child(4) { animation-delay: .79s !important; }
.ldc-h5-branchen li:nth-child(5) { animation-delay: .87s !important; } .ldc-h5-branchen li:nth-child(6) { animation-delay: .95s !important; }
@keyframes ldcBranche { to { opacity: 1; transform: none; } }
.ldc-h5-kunden .ldc-h5-text { max-width: 30ch; }
.ldc-h5-google .ldc-h5-text { padding-right: 44px; max-width: none; }
.ldc-h5-google-kopf .ldc-gbadge-sterne svg { width: 16px; height: 16px; }
.ldc-h5-wort .ldc-wechselwort, .ldc-h5-wort .ldc-wechselwort * { color: var(--tinte); }
.ldc-h5-raster .ldc-h-unter { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .ldc-bewegt .ldc-h5-branchen li { opacity: 1; transform: none; animation: none; } }
.ldc-h5-kunden { justify-content: flex-start; }
.ldc-h5-kunden .ldc-h5-klein { order: 0; } .ldc .ldc-h5-branchen { order: 1; } .ldc-h5-kunden .ldc-h5-zahl { order: 2; } .ldc-h5-kunden .ldc-h5-text { order: 3; }
/* Hero 5: die Überschrift darf die Knöpfe nicht aus dem ersten Bildschirm schieben */
.ldc-h5-raster .ldc-h-titel { font-size: clamp(2.625rem, 4.6vw, 5rem); }
@media (min-width: 1800px) { .ldc-h5-raster .ldc-h-titel { font-size: clamp(4.5rem, 4.2vw, 6rem); } }
/* Runde 5c: Feinschliff nach der Handy-Kontrolle */
.ldc-h5-raster .ldc-h-aktionen { margin-top: 30px; }
@media (max-width: 700px), (hover: none) { .ldc-projekt-kachel::after { background: linear-gradient(180deg, rgba(1, 25, 38, 0) 58%, rgba(1, 25, 38, .72)); } }
@media (max-width: 700px) { .ldc-h5-google .ldc-h5-text { padding-right: 0; } .ldc-h5-bauen { min-height: 0; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 6 (20.09.2026 spät, Marcel)
· Hero 6/7/8: Bild rechts, schwebende Widgets mit kleinen Grafiken, im Titel
wechselt das Wort auf grauem Grund; links Google und 200+
· Projekte: zwei versetzte Spalten, Format 4:3, Titel unter dem Bild
· Kundenstimmen: Zahlenkarte + versetzte Karten, nur Firmennamen
═══════════════════════════════════════════════════════════════════════════ */
/* ── Wechselwort im Titel ──────────────────────────────────────────────── */
.ldc .ldc-h .ldc-h6-titel { font-size: clamp(2.5rem, 4.5vw, 4.75rem); line-height: 1.08; text-wrap: balance; }
.ldc-dreh { display: inline-flex; vertical-align: baseline; overflow: hidden; white-space: nowrap; padding: .02em .22em .08em; margin: 0 -.04em; border-radius: .26em; background: var(--karte); transition: width .6s var(--v3-kurve); }
.ldc-dreh > span { display: inline-block; transition: transform .45s var(--v3-kurve), opacity .3s var(--v3-kurve); }
.ldc-dreh.geht > span { transform: translateY(-70%); opacity: 0; }
.ldc-dreh.kommt > span { transform: translateY(70%); opacity: 0; transition: none; }
/* ── Bühne mit Bild ────────────────────────────────────────────────────── */
.ldc-h6-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.ldc-h6-raster .ldc-h-unter { margin-top: 26px; max-width: 34em; }
.ldc-h6-raster .ldc-h-aktionen, .ldc-h7-kopf .ldc-h-aktionen { margin-top: 30px; }
.ldc-h6-raster .ldc-h-belege { margin-top: 40px; }
.ldc-h6-buehne { position: relative; }
.ldc-h6-bild { margin: 0; border-radius: var(--v3-r); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--karte); }
.ldc-h6-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Widgets */
.ldc .ldc-hw, .ldc .ldc-hw:hover { color: var(--tinte); text-decoration: none; }
.ldc-hw { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 20px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(10, 23, 32, .06), 0 28px 56px -28px rgba(1, 25, 38, .5); animation: ldcSchweben 7s ease-in-out infinite; }
.ldc-hw b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.ldc-hw-zeile { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); line-height: 1.35; }
.ldc-hw-zeile b { display: inline; font-size: inherit; color: var(--tinte); }
.ldc-hw-gross { font-size: 1.875rem !important; letter-spacing: -.045em !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
@keyframes ldcSchweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ldc-hw-kurve { top: 9%; left: -64px; display: block; width: 236px; padding: 16px 18px 14px; animation-duration: 8s; }
.ldc-hw-kurve svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.ldc-hw-linie { stroke: var(--blau-tief); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ldc-hw-flaeche { fill: rgba(31, 177, 251, .14); opacity: 0; }
.ldc-drin .ldc-hw-linie, .ldc-h6-buehne.ldc-drin .ldc-hw-linie { animation: ldcLinieZiehen 2.2s var(--v3-kurve) .7s forwards; }
.ldc-drin .ldc-hw-flaeche, .ldc-h6-buehne.ldc-drin .ldc-hw-flaeche { animation: ldcFlaecheEin 1.2s ease 1.6s forwards; }
@keyframes ldcLinieZiehen { to { stroke-dashoffset: 0; } }
@keyframes ldcFlaecheEin { to { opacity: 1; } }
.ldc-hw-puls { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: ldcPuls 2s ease-out infinite; }
@keyframes ldcPuls { to { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
.ldc-hw-kunden { right: -28px; top: 44%; animation-duration: 6.5s; animation-delay: -2s; }
.ldc-hw-balken { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.ldc-hw-balken i { width: 7px; border-radius: 4px; background: var(--tinte); height: 100%; transform: scaleY(.1); transform-origin: 50% 100%; }
.ldc-hw-balken i:nth-child(1) { --h: .3; } .ldc-hw-balken i:nth-child(2) { --h: .42; } .ldc-hw-balken i:nth-child(3) { --h: .5; }
.ldc-hw-balken i:nth-child(4) { --h: .66; } .ldc-hw-balken i:nth-child(5) { --h: .8; } .ldc-hw-balken i:nth-child(6) { --h: 1; background: var(--blau); }
.ldc-drin .ldc-hw-balken i, .ldc-h6-buehne.ldc-drin .ldc-hw-balken i { animation: ldcBalken 1s var(--v3-kurve) forwards; }
.ldc-hw-balken i:nth-child(1) { animation-delay: .8s !important; } .ldc-hw-balken i:nth-child(2) { animation-delay: .88s !important; }
.ldc-hw-balken i:nth-child(3) { animation-delay: .96s !important; } .ldc-hw-balken i:nth-child(4) { animation-delay: 1.04s !important; }
.ldc-hw-balken i:nth-child(5) { animation-delay: 1.12s !important; } .ldc-hw-balken i:nth-child(6) { animation-delay: 1.2s !important; }
@keyframes ldcBalken { to { transform: scaleY(var(--h)); } }
.ldc-hw-antwort { left: -40px; bottom: 8%; animation-duration: 7.5s; animation-delay: -4s; }
.ldc-hw-google { right: 6%; top: -30px; animation-duration: 7s; animation-delay: -1s; }
.ldc-hw-google .ldc-gbadge-sterne { display: flex; margin-bottom: 4px; }
.ldc-hw-google .ldc-gbadge-sterne svg { opacity: 1 !important; transform: none !important; }
/* Variante 7: Bild breit */
.ldc-h7-kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; align-items: end; margin-bottom: 56px; }
.ldc-h7-kopf .ldc-h-unter { margin: 0; }
.ldc-h7-buehne .ldc-h6-bild { aspect-ratio: 21 / 9; }
.ldc-h7-buehne .ldc-hw-kurve { left: 4%; top: auto; bottom: -34px; }
.ldc-h7-buehne .ldc-hw-kunden { right: 5%; top: 14%; }
.ldc-h7-buehne .ldc-hw-antwort { left: auto; right: 22%; bottom: -26px; }
.ldc-h7-buehne .ldc-hw-google { right: auto; left: 30%; top: -28px; }
/* Variante 8: zwei Bilder */
.ldc-h8-buehne { padding: 0 0 72px 17%; }
.ldc-h8-zweit { position: absolute; z-index: 1; left: 0; bottom: 0; width: 46%; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 0 0 8px #fff; }
.ldc-h8-zweit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ldc-h8-buehne .ldc-hw-kurve { left: -12px; top: 6%; }
.ldc-h8-buehne .ldc-hw-antwort { left: auto; right: -20px; bottom: 120px; }
.ldc-h8-buehne .ldc-hw-kunden { top: 34%; }
/* ── Projekte versetzt ─────────────────────────────────────────────────── */
.ldc-projekte.ldc-projekte-versetzt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(40px, 8vw, 150px); align-items: start; }
.ldc-projekte-spalte { display: grid; gap: clamp(56px, 7vw, 110px); }
.ldc-projekte-spalte:nth-child(2) { padding-top: clamp(80px, 12vw, 200px); }
.ldc-projekte-versetzt .ldc-projekt-f1 { width: 86%; }
.ldc-projekte-spalte:nth-child(2) .ldc-projekt-f1 { margin-left: auto; }
.ldc-projekte-versetzt .ldc-projekt-f2 { width: 92%; margin-left: auto; }
.ldc-projekte-spalte:nth-child(2) .ldc-projekt-f2 { margin-left: 0; }
.ldc-projekte-versetzt .ldc-projekt-kachel::after { content: none; }
.ldc-projekte-versetzt .ldc-projekt-kachel { border-radius: 22px; }
.ldc .ldc-projekt-name { font-size: clamp(1.375rem, 2vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; margin: 22px 0 12px; transition: translate .5s var(--v3-kurve); }
.ldc-projekt:hover .ldc-projekt-name { translate: 8px 0; }
.ldc .ldc-projekt-marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ldc-projekt-marken span { padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linie); font-size: .8125rem; font-weight: 700; line-height: 1; color: var(--tinte-leise); }
/* ── Kundenstimmen neu ─────────────────────────────────────────────────── */
.ldc-meinungen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ldc-meinung-zahl { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; border-radius: var(--v3-r); background: var(--v3-nacht); color: #fff; min-height: 420px; }
.ldc .ldc-meinung-gross { font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; margin: 0 0 14px; color: #fff; font-variant-numeric: tabular-nums; }
.ldc .ldc-meinung-unter { font-size: 1.0625rem; line-height: 1.5; font-weight: 600; color: rgba(255, 255, 255, .78); margin: 0; max-width: 26ch; }
.ldc-meinung-google { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
.ldc-meinung-google b { color: #fff; }
.ldc-meinung-google .ldc-stimm-sterne svg { width: 18px; height: 18px; }
.ldc-meinung { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: var(--v3-r); background: var(--karte); transition: translate .5s var(--v3-kurve), background .4s var(--v3-kurve); }
.ldc-meinung:hover { translate: 0 -6px; background: var(--karte-tief); }
.ldc-meinung-0 { grid-column: span 5; } .ldc-meinung-1 { grid-column: span 3; }
.ldc-meinung-2 { grid-column: span 3; } .ldc-meinung-3 { grid-column: span 5; }
.ldc-meinung .ldc-stimm-sterne svg { width: 18px; height: 18px; }
.ldc-meinung blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 1.0625rem; font-weight: 600; font-style: normal; letter-spacing: -.012em; line-height: 1.55; color: var(--tinte); text-wrap: pretty; }
.ldc-meinung blockquote::before { content: none; }
.ldc-meinung-0 blockquote, .ldc-meinung-3 blockquote { font-size: clamp(1.125rem, 1.35vw, 1.3125rem); }
.ldc-meinung figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-meinung figcaption b { display: block; font-size: .9375rem; font-weight: 800; color: var(--tinte); }
.ldc-meinung figcaption img { height: 30px; width: auto; }
.ldc-meinung figcaption i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: #fff; font-style: normal; font-weight: 800; }
@media (max-width: 1100px) {
.ldc-h6-raster { grid-template-columns: 1fr; gap: 56px; }
.ldc-h6-bild { aspect-ratio: 4 / 3; }
.ldc-hw-kurve { left: -8px; } .ldc-hw-kunden { right: -8px; } .ldc-hw-antwort { left: -8px; }
.ldc-h7-kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
.ldc-meinung-zahl { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
.ldc-meinung-0, .ldc-meinung-1, .ldc-meinung-2, .ldc-meinung-3 { grid-column: span 6; }
}
@media (max-width: 700px) {
.ldc-h6-bild, .ldc-h7-buehne .ldc-h6-bild { aspect-ratio: 1 / 1; }
.ldc-hw { padding: 12px 14px; border-radius: 16px; gap: 10px; }
.ldc-hw-kurve { width: 180px; top: -22px; left: 10px; }
.ldc-hw-kunden { right: 10px; top: auto; bottom: 84px; }
.ldc-hw-antwort, .ldc-h7-buehne .ldc-hw-antwort, .ldc-h8-buehne .ldc-hw-antwort { left: 10px; right: auto; bottom: -22px; }
.ldc-hw-google, .ldc-h7-buehne .ldc-hw-google { display: none; }
.ldc-h7-buehne .ldc-hw-kurve { bottom: auto; top: -22px; left: 10px; }
.ldc-h7-buehne .ldc-hw-kunden { top: auto; right: 10px; }
.ldc-h8-buehne { padding: 0 0 40px; } .ldc-h8-zweit { display: none; }
.ldc-projekte.ldc-projekte-versetzt { grid-template-columns: 1fr; gap: 40px; }
.ldc-projekte-spalte { gap: 40px; }
.ldc-projekte-spalte:nth-child(2) { padding-top: 0; }
.ldc-projekte-versetzt .ldc-projekt { width: 100% !important; margin-left: 0 !important; }
.ldc-meinung-0, .ldc-meinung-1, .ldc-meinung-2, .ldc-meinung-3 { grid-column: 1 / -1; }
.ldc-meinungen { gap: 12px; } .ldc-meinung, .ldc-meinung-zahl { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-hw, .ldc-hw-puls { animation: none; }
.ldc-hw-linie { stroke-dashoffset: 0; animation: none !important; } .ldc-hw-flaeche { opacity: 1; animation: none !important; }
.ldc-hw-balken i { transform: scaleY(var(--h)); animation: none !important; }
.ldc-dreh, .ldc-dreh > span { transition: none; }
}
/* Runde 6b */
.ldc .ldc-pille-hell svg, .ldc .ldc-pille-voll svg { color: #fff; }
.ldc-meinung-2 { grid-column: span 5; } .ldc-meinung-3 { grid-column: span 3; }
.ldc-meinung-2 blockquote { font-size: clamp(1.125rem, 1.35vw, 1.3125rem); } .ldc-meinung-3 blockquote { font-size: 1.25rem; line-height: 1.4; }
@media (max-width: 1100px) { .ldc-meinung-2, .ldc-meinung-3 { grid-column: span 6; } }
@media (max-width: 700px) { .ldc-meinung-2, .ldc-meinung-3 { grid-column: 1 / -1; } }
/* Runde 6c: Handy – Widgets dürfen keine Gesichter verdecken, 200+ steht schon darüber */
@media (max-width: 700px) {
.ldc-h6-bild, .ldc-h7-buehne .ldc-h6-bild { aspect-ratio: 4 / 4.4; }
.ldc-h6-bild img { object-position: 50% 0; }
.ldc-h6-buehne { margin-top: 26px; }
.ldc-hw-kunden { display: none; }
.ldc-hw-kurve, .ldc-h7-buehne .ldc-hw-kurve, .ldc-h8-buehne .ldc-hw-kurve { width: 150px; top: -34px; left: auto; right: 10px; padding: 10px 12px; }
.ldc-hw-kurve .ldc-hw-zeile { font-size: .6875rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Runde 7 (20.09.2026 abends, Marcel)
· Hero-Titel in vier festen Zeilen: das wechselnde Wort hat seine eigene Zeile,
dadurch bricht nichts mehr um und die Höhe bleibt gleich; nur die graue Fläche
wächst weich auf die neue Wortbreite
· Die Widgets im Bild sind entfernt („kompletter Scheiß", 200+ stand dreimal da)
═══════════════════════════════════════════════════════════════════════════ */
.ldc-tz { display: block; white-space: nowrap; }
.ldc .ldc-h .ldc-h6-titel { text-wrap: nowrap; line-height: 1.12; }
.ldc-tz .ldc-dreh { margin: .04em 0 .04em -.14em; vertical-align: top; }
.ldc-h6-bild { aspect-ratio: 4 / 4.4; }
@media (max-width: 700px) { .ldc-h6-buehne { margin-top: 0; } }
/* ═══════════════════════════════════════════════════════════════════════════
Unterseiten aus dem Plugin (templates/seiten/*.php, seit 1.9.0)
Seitenkopf, Kartenstapel (Leistungen), Zahlenreihe (Projekte), Wege und
Anfahrt (Kontakt). Gleiche Schrift, Breite und Kurve wie die Startseite.
═══════════════════════════════════════════════════════════════════════════ */
.ldc-s-kopf { padding: 56px 0 72px; }
.ldc-s-pfad { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; font-size: .875rem; font-weight: 600; color: var(--tinte-leise); }
.ldc .ldc-s-pfad a { color: var(--tinte-leise); text-decoration: none; } .ldc .ldc-s-pfad a:hover { color: var(--tinte); }
.ldc-s-pfad span:last-child { color: var(--tinte); }
.ldc-s-kopf-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 72px; align-items: end; }
.ldc .ldc-s-titel { margin: 0; font-size: clamp(2.375rem, 4.4vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.06; color: var(--tinte); text-wrap: balance; }
.ldc-s-titel em { font-style: normal; color: var(--tinte-still); }
.ldc .ldc-s-unter { margin: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--tinte-leise); }
.ldc .ldc-s-sprung { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.ldc-s-sprung li { margin: 0; }
.ldc .ldc-s-sprung a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--karte); color: var(--tinte); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background .3s var(--v3-kurve), color .3s var(--v3-kurve); }
.ldc .ldc-s-sprung a:hover { background: var(--tinte); color: #fff; }
.ldc-anker { position: absolute; top: -120px; }
.ldc-seite [id] { scroll-margin-top: 110px; }
/* ── Kartenstapel ──────────────────────────────────────────────────────── */
.ldc-kartenstapel { display: grid; gap: 28px; }
.ldc-stapelkarte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; border-radius: 36px; background: var(--karte); transform-origin: 50% 0; }
.ldc-stapelkarte-1 { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linie); }
.ldc-stapelkarte-2 { background: var(--v3-nacht); color: #fff; }
.ldc-stapelkarte:nth-child(even) .ldc-stapelkarte-bild { order: -1; }
.ldc .ldc-stapelkarte-nr { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: .875rem; font-weight: 700; color: var(--tinte-leise); }
.ldc-stapelkarte-nr span { display: grid; place-items: center; min-width: 38px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
.ldc .ldc-stapelkarte h2 { margin: 0 0 18px; font-size: clamp(1.875rem, 3vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: inherit; text-wrap: balance; }
.ldc .ldc-stapelkarte-lead { margin: 0 0 26px; font-size: 1.0625rem; line-height: 1.7; color: var(--tinte-leise); max-width: 52ch; }
.ldc .ldc-stapelkarte-punkte { list-style: none; display: grid; gap: 12px; margin: 0 0 34px; padding: 0; }
.ldc-stapelkarte-punkte li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.ldc-stapelkarte-punkte svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--tinte); color: #fff; }
.ldc-stapelkarte-2 .ldc-stapelkarte-nr, .ldc-stapelkarte-2 .ldc-stapelkarte-lead { color: rgba(255, 255, 255, .76); }
.ldc-stapelkarte-2 .ldc-stapelkarte-nr span, .ldc-stapelkarte-2 .ldc-stapelkarte-punkte svg { background: rgba(255, 255, 255, .16); }
.ldc-stapelkarte-bild { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--karte-tief); }
.ldc-stapelkarte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--v3-kurve); }
.ldc-stapelkarte:hover .ldc-stapelkarte-bild img { transform: scale(1.04); }
.ldc-stapelkarte-bild figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.ldc-stapelkarte-bild figcaption span { padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--tinte); font-size: .8125rem; font-weight: 700; line-height: 1; }
@media (min-width: 1001px) and (min-height: 720px) {
.ldc-stapelkarte { position: sticky; top: calc(96px + var(--i) * 10px); min-height: min(640px, calc(100vh - 170px)); scale: calc(1 - var(--tief, 0) * .05); filter: brightness(calc(1 - var(--tief, 0) * .1)); will-change: scale; }
.ldc-kartenstapel { gap: 40px; padding-bottom: 40px; }
}
/* ── Zahlenreihe (Projekte) ────────────────────────────────────────────── */
.ldc .ldc-s-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ldc-s-zahlen > div { padding: 30px 28px 30px 0; } .ldc-s-zahlen > div + div { padding-left: 28px; border-left: 1px solid var(--linie); }
.ldc-s-zahlen dt { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ldc-s-zahlen dd { margin: 10px 0 0; font-size: .9375rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-s-portfolio .ld-portfolio-wrap { font-family: inherit; }
/* ── Kontakt: Wege und Anfahrt ─────────────────────────────────────────── */
.ldc-s-wege { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; }
.ldc .ldc-s-weg, .ldc .ldc-s-weg:hover { color: var(--tinte); text-decoration: none; }
.ldc-s-weg { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 30px; border-radius: var(--v3-r); background: var(--karte); transition: translate .5s var(--v3-kurve), background .4s var(--v3-kurve); }
.ldc-s-weg:hover { translate: 0 -6px; background: var(--karte-tief); }
.ldc-s-weg-haupt { background: var(--v3-nacht); } .ldc-s-weg-haupt:hover { background: var(--v3-nacht); }
.ldc .ldc-s-weg-haupt, .ldc .ldc-s-weg-haupt:hover { color: #fff; }
.ldc-s-weg-symbol { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: auto; border-radius: 50%; background: #fff; }
.ldc-s-weg-haupt .ldc-s-weg-symbol { background: rgba(255, 255, 255, .14); }
.ldc-s-weg-symbol svg { width: 28px; height: 28px; }
.ldc-s-weg-klein { margin-top: 40px; font-size: .875rem; font-weight: 700; opacity: .7; }
.ldc-s-weg b { margin: 6px 0 8px; font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ldc-s-weg-text { font-size: .9375rem; line-height: 1.5; opacity: .74; }
.ldc-s-weg i { position: absolute; right: 26px; top: 30px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(10, 23, 32, .06); transition: transform .45s var(--v3-kurve), background .3s; }
.ldc-s-weg-haupt i { background: rgba(255, 255, 255, .14); }
.ldc-s-weg i svg { width: 16px; height: 16px; }
.ldc-s-weg:hover i { transform: translate(3px, -3px); }
.ldc-s-anfahrt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ldc-s-anfahrt .ldc-knopf { margin-top: 30px; }
.ldc .ldc-s-daten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; }
.ldc-s-daten > div { padding: 22px 0; border-top: 1px solid var(--linie); }
.ldc-s-daten dt { margin-bottom: 8px; font-size: .8125rem; font-weight: 700; color: var(--tinte-leise); }
.ldc-s-daten dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.55; color: var(--tinte); }
.ldc .ldc-s-daten a { color: var(--tinte); text-decoration: underline; text-decoration-color: rgba(10, 23, 32, .25); text-underline-offset: 3px; }
.ldc .ldc-s-daten a:hover { text-decoration-color: currentColor; }
@media (max-width: 1000px) {
.ldc-s-kopf { padding: 32px 0 48px; } .ldc-s-pfad { margin-bottom: 26px; }
.ldc-s-kopf-raster { grid-template-columns: 1fr; gap: 26px; }
.ldc-stapelkarte { grid-template-columns: 1fr; gap: 30px; padding: 32px; border-radius: 28px; }
.ldc-stapelkarte .ldc-stapelkarte-bild { order: -1 !important; aspect-ratio: 16 / 10; }
.ldc .ldc-s-zahlen { grid-template-columns: 1fr 1fr; }
.ldc-s-zahlen > div:nth-child(3) { padding-left: 0; border-left: 0; } .ldc-s-zahlen > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
.ldc-s-wege { grid-template-columns: 1fr; } .ldc-s-weg { min-height: 0; } .ldc-s-weg-klein { margin-top: 28px; }
.ldc-s-anfahrt { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
.ldc-stapelkarte { padding: 22px 20px 26px; border-radius: 22px; }
.ldc-stapelkarte-bild { border-radius: 16px; }
.ldc .ldc-s-daten { grid-template-columns: 1fr; }
.ldc-s-zahlen > div, .ldc-s-zahlen > div + div { padding: 20px 14px 20px 0; } .ldc-s-zahlen > div:nth-child(even) { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ldc-stapelkarte { scale: 1 !important; filter: none !important; } .ldc-stapelkarte-bild img, .ldc-s-weg { transition: none; } }
/* Runde 8b: der Seitenkopf beginnt unter dem festen Kopf; „ldc-stapel" gab es schon (Porträt-Stapel, runde Bilder), der Kartenstapel heißt deshalb ldc-kartenstapel */
.ldc-s-kopf { padding-top: calc(var(--header-height, 100px) + 44px); }
.ldc-s-titel em { display: block; }
.ldc .ldc-stapelkarte-0 .ldc-knopf.ldc-knopf-ruhig { background: #fff; }
.ldc .ldc-stapelkarte-0 .ldc-knopf.ldc-knopf-ruhig:hover { background: #fff; box-shadow: 0 14px 30px -18px rgba(1, 25, 38, .4); }
@media (max-width: 1000px) { .ldc-s-kopf { padding-top: calc(var(--header-height, 78px) + 24px); } }
/* Kontaktseite: die drei Wege stehen dort schon groß darüber, im Anfrage-Block nicht noch einmal */
.page-id-22843 .ldc-anfrage-block .ldc-wege { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 9 (20.09.2026 nachts): Über uns, Aktuelles, Feinschliff
═══════════════════════════════════════════════════════════════════════════ */
/* Leistungen: die Überzeile der Karte sagt, worum es geht – deutlich größer */
.ldc .ldc-stapelkarte-nr { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); font-weight: 800; letter-spacing: -.015em; color: var(--tinte); margin-bottom: 26px; }
.ldc-stapelkarte-2 .ldc-stapelkarte-nr { color: #fff; }
.ldc-stapelkarte-nr span { min-width: 44px; height: 32px; font-size: .8125rem; }
/* Kundenstimmen: die Einblendung sitzt auf einer Hülle, das Überfahren auf der Karte
(beides auf demselben Element hat sich gegenseitig die Übergänge überschrieben) */
.ldc-meinung-huelle { display: flex; min-width: 0; }
.ldc-meinung-huelle > .ldc-meinung { flex: 1; }
.ldc-meinung-huelle.ldc-meinung-0, .ldc-meinung-huelle.ldc-meinung-3 { grid-column: span 5; }
.ldc-meinung-huelle.ldc-meinung-1, .ldc-meinung-huelle.ldc-meinung-2 { grid-column: span 3; }
.ldc-meinung-huelle.ldc-meinung-4 { grid-column: span 4; } .ldc-meinung-huelle.ldc-meinung-5 { grid-column: span 4; } .ldc-meinung-huelle.ldc-meinung-6 { grid-column: span 4; }
.ldc-meinung-huelle > .ldc-meinung { grid-column: auto; transition: transform .45s var(--v3-kurve), background .3s ease; translate: none !important; }
.ldc-meinung-huelle > .ldc-meinung:hover { transform: translateY(-6px); background: var(--karte-tief); }
@media (max-width: 1100px) { .ldc-meinung-huelle[class*="ldc-meinung-"] { grid-column: span 6; } }
@media (max-width: 700px) { .ldc-meinung-huelle[class*="ldc-meinung-"] { grid-column: 1 / -1; } }
/* ── Über uns ──────────────────────────────────────────────────────────── */
.ldc-s-breitbild { position: relative; margin: 0; border-radius: var(--v3-r); overflow: hidden; aspect-ratio: 21 / 9; background: var(--karte); }
.ldc-s-breitbild img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.ldc-s-breitbild figcaption { position: absolute; left: 20px; bottom: 20px; right: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.ldc-s-breitbild figcaption > span { display: inline-flex; align-items: baseline; gap: 8px; padding: 14px 20px; border-radius: 18px; background: rgba(255, 255, 255, .94); font-size: .9375rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-s-breitbild figcaption b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ldc-s-zwei { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.ldc-s-klebt { position: sticky; top: 130px; }
.ldc .ldc-s-zeit { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; display: grid; gap: 56px; }
.ldc-s-zeit-linie { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; margin: 0; background: var(--linie); border-radius: 2px; overflow: hidden; }
.ldc-s-zeit-linie b { display: block; width: 100%; height: 100%; background: var(--tinte); transform-origin: 50% 0; transform: scaleY(var(--zeit, 0)); }
.ldc-s-zeit-punkt { position: relative; margin: 0; opacity: .35; transition: opacity .6s var(--v3-kurve); }
.ldc-s-zeit-punkt.ist-an { opacity: 1; }
.ldc-s-zeit-punkt::before { content: ""; position: absolute; left: -44px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--linie); transition: box-shadow .4s var(--v3-kurve), background .4s; }
.ldc-s-zeit-punkt.ist-an::before { background: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 6px rgba(1, 47, 71, .1); }
.ldc-s-zeit-jahr { display: block; font-size: clamp(2.25rem, 3.6vw, 3.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tinte); }
.ldc .ldc-s-zeit h3 { margin: 12px 0 8px; font-size: 1.375rem; letter-spacing: -.025em; }
.ldc .ldc-s-zeit p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-leise); max-width: 52ch; }
.ldc-s-saetze { border-top: 1px solid var(--linie); }
.ldc-s-satz { display: grid; grid-template-columns: 80px minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: baseline; padding: 40px 0; border-bottom: 1px solid var(--linie); }
.ldc-s-satz-nr { font-size: .9375rem; font-weight: 800; color: var(--tinte-still); font-variant-numeric: tabular-nums; }
.ldc .ldc-s-satz h3 { margin: 0; font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; transition: translate .5s var(--v3-kurve); }
.ldc-s-satz:hover h3 { translate: 12px 0; }
.ldc .ldc-s-satz p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--tinte-leise); }
.ldc .ldc-s-urkunden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ldc-s-urkunden li { margin: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 22px; background: var(--karte); font-size: .875rem; color: var(--tinte-leise); line-height: 1.45; }
.ldc-s-urkunde-bild { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: 14px; background: #fff; overflow: hidden; }
.ldc-s-urkunde-bild img { max-width: 78%; max-height: 78%; width: auto !important; height: auto !important; object-fit: contain; }
.ldc-s-urkunden b { font-size: 1rem; font-weight: 800; letter-spacing: -.015em; color: var(--tinte); }
/* ── Aktuelles ─────────────────────────────────────────────────────────── */
.ldc-s-beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin-top: 64px; }
.ldc-s-beitrag { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ldc-s-beitrag-gross { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.ldc-s-beitrag-bild { display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--karte); }
.ldc-s-beitrag-gross .ldc-s-beitrag-bild { border-radius: var(--v3-r); }
.ldc-s-beitrag-bild img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.1s var(--v3-kurve); }
.ldc-s-beitrag:hover .ldc-s-beitrag-bild img { transform: scale(1.04); }
.ldc-s-beitrag-leer { display: grid; place-items: center; width: 100%; height: 100%; font-size: 4rem; font-weight: 800; color: var(--tinte-still); }
.ldc .ldc-s-beitrag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8125rem; font-weight: 700; color: var(--tinte-leise); }
.ldc-s-beitrag-meta span { padding: 6px 12px; border-radius: 999px; background: var(--karte); color: var(--tinte); line-height: 1; }
.ldc .ldc-s-beitrag h2 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.ldc .ldc-s-beitrag-gross h2 { font-size: clamp(1.875rem, 3vw, 3rem); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 18px; }
.ldc .ldc-s-beitrag h2 a { color: var(--tinte); text-decoration: none; background: linear-gradient(var(--tinte), var(--tinte)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--v3-kurve); }
.ldc .ldc-s-beitrag:hover h2 a { background-size: 100% 2px; }
.ldc .ldc-s-beitrag-kurz { margin: 0 0 16px; font-size: 1rem; line-height: 1.65; color: var(--tinte-leise); }
.ldc-s-blaettern { display: flex; justify-content: center; gap: 8px; margin-top: 64px; }
.ldc .ldc-s-blaettern a { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; background: var(--karte); color: var(--tinte); font-weight: 700; text-decoration: none; transition: background .3s, color .3s; }
.ldc .ldc-s-blaettern a:hover, .ldc .ldc-s-blaettern a[aria-current] { background: var(--tinte); color: #fff; }
@media (max-width: 1000px) {
.ldc-s-breitbild { aspect-ratio: 16 / 10; }
.ldc-s-zwei { grid-template-columns: 1fr; gap: 40px; } .ldc-s-klebt { position: static; }
.ldc-s-satz { grid-template-columns: 40px 1fr; } .ldc-s-satz p { grid-column: 2; }
.ldc .ldc-s-urkunden { grid-template-columns: 1fr 1fr; gap: 12px; }
.ldc-s-beitrag-gross { grid-template-columns: 1fr; gap: 24px; }
.ldc-s-beitraege { grid-template-columns: 1fr 1fr; margin-top: 48px; }
}
@media (max-width: 640px) {
.ldc-s-breitbild { aspect-ratio: 4 / 4.2; } .ldc-s-breitbild figcaption > span { padding: 10px 14px; font-size: .8125rem; } .ldc-s-breitbild figcaption b { font-size: 1.125rem; }
.ldc-s-beitraege { grid-template-columns: 1fr; }
.ldc-s-urkunden li { padding: 14px; }
}
/* Aktuelles ohne Beiträge: Kanäle */
.ldc-s-kanaele { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 96px; }
.ldc .ldc-s-kanal, .ldc .ldc-s-kanal:hover { color: var(--tinte); text-decoration: none; }
.ldc-s-kanal { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--v3-r); background: var(--karte); transition: background .4s var(--v3-kurve); }
.ldc-s-kanal:hover { background: var(--karte-tief); }
.ldc-s-kanal small { display: block; font-size: .875rem; font-weight: 700; color: var(--tinte-leise); }
.ldc-s-kanal b { display: block; margin: 4px 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.ldc-s-kanal span span { font-size: .9375rem; color: var(--tinte-leise); }
.ldc-s-kanal i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tinte); color: #fff; transition: transform .45s var(--v3-kurve); }
.ldc-s-kanal i svg { width: 20px; height: 20px; }
.ldc-s-kanal:hover i { transform: translate(3px, -3px); }
@media (max-width: 700px) { .ldc-s-kanaele { grid-template-columns: 1fr; margin-top: 56px; } .ldc-s-kanal { padding: 22px; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 10 (20.09.2026 spätnachts, Marcel)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Hero 9: Titel links, Text rechts, darunter das Band mit unserer Arbeit ── */
.ldc-h9-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: end; padding-bottom: 56px; }
.ldc .ldc-h .ldc-h9-titel { font-size: clamp(2.75rem, 5.6vw, 6rem); line-height: 1.06; }
.ldc-h9-seite .ldc-h-unter { margin: 0; max-width: 34em; }
.ldc-h9-seite .ldc-h-aktionen { margin-top: 28px; }
.ldc-h9-seite .ldc-h-belege { margin-top: 32px; }
.ldc-h9-band { overflow: hidden; padding: 6px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ldc .ldc-h9-band ul { list-style: none; display: flex; gap: 22px; width: max-content; margin: 0; padding: 0; animation: ldcH9Band 70s linear infinite; }
.ldc-h9-band:hover ul, .ldc-h9-band:focus-within ul { animation-play-state: paused; }
.ldc-h9-band li { flex: none; width: clamp(280px, 30vw, 520px); margin: 0; }
.ldc .ldc-h9-band a { position: relative; display: block; border-radius: 24px; overflow: hidden; background: var(--karte); color: #fff; text-decoration: none; }
.ldc-h9-band img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--v3-kurve); }
.ldc-h9-band a:hover img { transform: scale(1.04); }
.ldc-h9-band a span { position: absolute; left: 16px; bottom: 16px; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--tinte); font-size: .875rem; font-weight: 700; line-height: 1; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .45s var(--v3-kurve); }
.ldc-h9-band a:hover span, .ldc-h9-band a:focus-visible span { opacity: 1; transform: none; }
@keyframes ldcH9Band { to { transform: translateX(calc(-50% - 11px)); } }
.ldc-h-9 .ldc-logos { margin-top: 56px; }
/* ── Ablauf als Karten ─────────────────────────────────────────────────── */
.ldc .ldc-weg.ldc-weg-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ldc-weg-karten .ldc-weg-schritt { position: relative; margin: 0; padding: 28px 26px 30px; border-radius: var(--v3-r); background: var(--karte); box-shadow: inset 0 0 0 1.5px transparent; transition: background .6s var(--v3-kurve), box-shadow .6s var(--v3-kurve), translate .6s var(--v3-kurve); }
.ldc-weg-karten .ldc-weg-schritt.ist-an { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tinte); translate: 0 -6px; }
.ldc-weg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 56px; }
.ldc-weg-karten .ldc-weg-nr { position: static; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tinte-still); font-size: 1rem; font-weight: 800; box-shadow: none; transition: background .6s var(--v3-kurve), color .6s var(--v3-kurve); }
.ldc-weg-karten .ldc-weg-schritt.ist-an .ldc-weg-nr { background: var(--tinte); color: #fff; box-shadow: none; }
.ldc-weg-marke { padding: 7px 12px; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 700; line-height: 1; color: var(--tinte-leise); transition: background .6s; }
.ldc-weg-karten .ldc-weg-schritt.ist-an .ldc-weg-marke { background: var(--karte); }
.ldc .ldc-weg-karten .ldc-weg-schritt h3 { margin: 0 0 10px; font-size: 1.5rem; letter-spacing: -.03em; color: var(--tinte); }
.ldc .ldc-weg-karten .ldc-weg-schritt p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinte-leise); }
.ldc-weg-pfeil { position: absolute; z-index: 2; right: -32px; top: 28px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tinte); box-shadow: 0 0 0 1.5px var(--linie); }
.ldc-weg-pfeil svg { width: 16px; height: 16px; }
/* ── Leistungen: eine Karte, ein Design ────────────────────────────────── */
.ldc-stapelkarte { background: var(--karte) !important; color: var(--tinte) !important; box-shadow: none !important; }
.ldc-stapelkarte:nth-child(even) { background: #e9e9ec !important; }
.ldc-stapelkarte-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.ldc .ldc-stapelkarte .ldc-knopf.ldc-knopf-ruhig { background: #fff; }
.ldc-stapelkarte-bild figcaption { gap: 8px; }
.ldc-marke { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--tinte); font-size: .875rem; font-weight: 800; line-height: 1; box-shadow: 0 10px 24px -14px rgba(1, 25, 38, .5); }
.ldc-marke img { width: 20px !important; height: 20px !important; border-radius: 0 !important; transform: none !important; object-fit: contain; }
/* ── Kontakt: Karte, Social ────────────────────────────────────────────── */
.ldc-s-anfahrt { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: stretch; }
.ldc-s-karte { position: relative; min-height: 440px; border-radius: var(--v3-r); overflow: hidden; background: var(--karte); }
.ldc-s-karte iframe, .ldc-s-karte > div { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.ldc .ldc-s-daten { grid-template-columns: 1fr; align-content: start; }
.ldc-s-sozial { display: flex; flex-wrap: wrap; gap: 10px; }
.ldc .ldc-s-daten .ldc-s-sozial a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--karte); text-decoration: none; font-size: .9375rem; font-weight: 700; transition: background .3s, color .3s; }
.ldc .ldc-s-daten .ldc-s-sozial a:hover { background: var(--tinte); color: #fff; }
.ldc-s-sozial svg { width: 20px; height: 20px; }
/* ── Aktuelles: Kanäle mit Symbol, Social Wall ─────────────────────────── */
.ldc-s-kanaele { margin-top: 0; }
.ldc-s-kanal { justify-content: flex-start; }
.ldc-s-kanal > span { flex: 1; }
.ldc-s-kanal .ldc-s-kanal-symbol { background: #fff; color: var(--tinte); }
.ldc-s-kanal .ldc-s-kanal-symbol svg { width: 24px; height: 24px; }
.ldc-s-kanal:hover .ldc-s-kanal-symbol { transform: none; }
.ldc-s-wall { margin-top: 28px; padding: 32px; border-radius: var(--v3-r); background: var(--karte); min-height: 200px; }
.ldc-s-wall:empty { display: none; }
/* ── Über uns: Berichte ────────────────────────────────────────────────── */
.ldc-s-berichte .ldc-frage-antwort > div { padding-bottom: 8px; }
.ldc-s-bericht-bild { display: block; width: 100% !important; max-width: 460px; height: auto !important; margin: 4px 0 20px; border-radius: 16px; }
.ldc-s-bericht-text p { padding: 0 !important; margin: 0 0 14px !important; max-width: 64ch; font-size: 1rem; line-height: 1.7; color: var(--tinte-leise); }
.ldc-s-breitbild img { object-position: 50% 30%; }
@media (max-width: 1000px) {
.ldc-h9-kopf { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
.ldc .ldc-weg.ldc-weg-karten { grid-template-columns: 1fr 1fr; }
.ldc-weg-pfeil { display: none; }
.ldc-weg-kopf { margin-bottom: 32px; }
.ldc-s-anfahrt { grid-template-columns: 1fr; gap: 28px; } .ldc-s-karte { min-height: 340px; }
}
@media (max-width: 640px) {
.ldc .ldc-weg.ldc-weg-karten { grid-template-columns: 1fr; gap: 12px; }
.ldc-h9-band li { width: 78vw; } .ldc-h9-band a span { opacity: 1; transform: none; }
.ldc-s-wall { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ldc .ldc-h9-band ul { animation: none; flex-wrap: nowrap; overflow-x: auto; } .ldc-weg-karten .ldc-weg-schritt { transition: none; } }
/* Runde 10b */
.ldc-s-karte > p { margin: 0; position: absolute; inset: 0; } .ldc-s-karte > p > iframe, .ldc-s-karte .brlbs-cmpnt-container, .ldc-s-karte .brlbs-cmpnt-content-blocker { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.ldc-marke img[src*="woocommerce"] { width: 34px !important; height: 34px !important; margin: -7px 0; }
.ldc .ldc-anfrage-danach { display: none; }
.page-id-22843 .ldc .ldc-anfrage-danach { display: grid; }
.ldc-s-bericht-bild { max-width: 460px !important; }
.ldc-weg-karten .ldc-weg-schritt:nth-child(1) { z-index: 4; } .ldc-weg-karten .ldc-weg-schritt:nth-child(2) { z-index: 3; } .ldc-weg-karten .ldc-weg-schritt:nth-child(3) { z-index: 2; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 11 (21.09.2026): Hero-Varianten 10 Bühne, 11 Spalten, 12 Schaufenster
═══════════════════════════════════════════════════════════════════════════ */
/* ── 10 · Bühne ────────────────────────────────────────────────────────── */
.ldc-h10-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 600px; padding: 72px 64px; border-radius: 40px; background: var(--v3-nacht); overflow: hidden; }
.ldc .ldc-h .ldc-h10-titel, .ldc-h10-buehne .ldc-h-unter { color: #fff; }
.ldc-h10-buehne .ldc-h-unter { margin-top: 24px; color: rgba(255, 255, 255, .78); max-width: 32em; }
.ldc-h10-buehne .ldc-h-aktionen { margin-top: 32px; }
.ldc .ldc-h10-buehne .ldc-textlink, .ldc .ldc-h10-buehne .ldc-textlink:hover { color: #fff; background-image: linear-gradient(#fff, #fff); }
.ldc .ldc-h10-buehne .ldc-textlink svg { color: #fff; }
.ldc-h10-buehne .ldc-dreh { background: rgba(255, 255, 255, .14); }
.ldc-h10-faecher { position: relative; display: block; height: 460px; }
.ldc-h10-karte { position: absolute; left: 50%; top: 50%; width: 74%; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); transition: transform .8s var(--v3-kurve); }
.ldc-h10-karte img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.ldc-h10-karte > span { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--tinte); font-size: .8125rem; font-weight: 700; line-height: 1; }
.ldc-h10-karte-0 { z-index: 3; transform: translate(-50%, -50%) rotate(-2deg); }
.ldc-h10-karte-1 { z-index: 2; transform: translate(-30%, -58%) rotate(7deg) scale(.92); }
.ldc-h10-karte-2 { z-index: 1; transform: translate(-72%, -40%) rotate(-10deg) scale(.86); }
.ldc-h10-faecher:hover .ldc-h10-karte-0 { transform: translate(-50%, -46%) rotate(0deg) scale(1.03); }
.ldc-h10-faecher:hover .ldc-h10-karte-1 { transform: translate(-8%, -72%) rotate(12deg) scale(.92); }
.ldc-h10-faecher:hover .ldc-h10-karte-2 { transform: translate(-94%, -34%) rotate(-15deg) scale(.86); }
.ldc-bewegt .ldc-h10-buehne:not(.ldc-drin) .ldc-h10-karte { transform: translate(-50%, 40%) rotate(0deg) scale(.8); }
.ldc-h10-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 28px; }
/* ── 11 · zwei gegenläufige Spalten ────────────────────────────────────── */
.ldc-h11-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ldc-h11-raster .ldc-h-unter { margin-top: 26px; max-width: 34em; }
.ldc-h11-raster .ldc-h-aktionen { margin-top: 30px; } .ldc-h11-raster .ldc-h-belege { margin-top: 36px; }
.ldc-h11-wand { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 640px; overflow: hidden; border-radius: var(--v3-r); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.ldc-h11-spalte { display: block; min-width: 0; }
.ldc-h11-spalte > span { display: flex; flex-direction: column; gap: 18px; animation: ldcH11Hoch 46s linear infinite; }
.ldc-h11-spalte-1 > span { animation-name: ldcH11Runter; animation-duration: 54s; }
/* (Anhalten beim Überfahren entfernt, siehe Runde 12: Pause-Knopf) */
.ldc-h11-wand img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
@keyframes ldcH11Hoch { to { transform: translateY(calc(-50% - 9px)); } }
@keyframes ldcH11Runter { from { transform: translateY(calc(-50% - 9px)); } to { transform: none; } }
/* ── 12 · Schaufenster ─────────────────────────────────────────────────── */
.ldc-h12-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 64px; align-items: end; margin-bottom: 48px; }
.ldc .ldc-h .ldc-h12-titel { font-size: clamp(2.75rem, 6vw, 6.5rem); line-height: 1.04; letter-spacing: -.05em; white-space: nowrap; }
.ldc-h12-titel .ldc-dreh { vertical-align: top; margin-top: .04em; }
.ldc-h12-seite .ldc-h-unter { margin: 0; } .ldc-h12-seite .ldc-h-aktionen { margin-top: 26px; }
.ldc-h12-schau { position: relative; aspect-ratio: 21 / 9; border-radius: 36px; overflow: hidden; background: var(--karte); }
.ldc-h12-bild { position: absolute; inset: 0; display: block; opacity: 0; clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--v3-kurve), opacity 0s linear 1.1s; z-index: 0; }
.ldc-h12-bild.ist-an { opacity: 1; clip-path: inset(0); z-index: 1; transition: clip-path 1.1s var(--v3-kurve), opacity 0s; }
.ldc-h12-bild img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); transition: transform 5s ease-out; }
.ldc-h12-bild.ist-an img { transform: none; }
.ldc-h12-leiste { position: absolute; z-index: 3; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 999px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .9375rem; font-weight: 700; color: var(--tinte); }
.ldc-h12-name { display: inline-block; min-width: 9em; transition: opacity .25s ease, transform .35s var(--v3-kurve); }
.ldc-h12-name.geht { opacity: 0; transform: translateY(6px); }
.ldc-h12-zaehler { font-variant-numeric: tabular-nums; color: var(--tinte-leise); font-weight: 600; } .ldc-h12-zaehler b { color: var(--tinte); }
.ldc-h12-linie { display: block; width: 90px; height: 3px; border-radius: 3px; background: rgba(10, 23, 32, .14); overflow: hidden; }
.ldc-h12-linie b { display: block; width: 100%; height: 100%; background: var(--tinte); transform-origin: 0 50%; transform: scaleX(0); animation: ldcDienstLinie var(--dauer, 4.2s) linear forwards; }
.ldc-h12-schau.ist-still .ldc-h12-linie b { animation-play-state: paused; }
.ldc-h12-belege { position: absolute; z-index: 3; right: 24px; bottom: 24px; }
@media (max-width: 1000px) {
.ldc-h10-buehne { grid-template-columns: 1fr; padding: 40px 28px; min-height: 0; border-radius: 28px; } .ldc-h10-faecher { height: 320px; }
.ldc-h11-raster { grid-template-columns: 1fr; gap: 40px; } .ldc-h11-wand { height: 420px; }
.ldc-h12-kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; } .ldc .ldc-h .ldc-h12-titel { white-space: normal; }
.ldc-h12-schau { aspect-ratio: 4 / 3; border-radius: 24px; } .ldc-h12-belege { display: none; }
}
@media (max-width: 640px) { .ldc-h10-faecher { height: 250px; } .ldc-h12-leiste { left: 12px; bottom: 12px; padding: 10px 14px; gap: 10px; } .ldc-h12-linie { width: 50px; } .ldc-h12-name { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .ldc-h11-spalte > span { animation: none; } .ldc-h10-karte, .ldc-h12-bild, .ldc-h12-bild img { transition: none; } .ldc-h12-linie b { animation: none; transform: scaleX(1); } }
/* Runde 11b: Schaufenster zweigeteilt – links die Grafik im eigenen Format 4:3 (über die volle Breite war sie
viel zu stark beschnitten), rechts eine dunkle Tafel mit Projektname, Zähler und Fortschritt */
@media (min-width: 1001px) {
.ldc-h12-schau { aspect-ratio: 2.26 / 1; background: var(--v3-nacht); }
.ldc-h12-bild { inset: 0 auto 0 0; width: 59%; }
.ldc-h12-bild img { object-position: 50% 50%; }
.ldc-h12-leiste { left: 59%; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 0 56px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.ldc-h12-leiste::before { content: "Neu im Portfolio"; font-size: .875rem; font-weight: 700; color: rgba(255, 255, 255, .66); }
.ldc-h12-name { font-size: clamp(2rem, 3.2vw, 3.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; min-width: 0; }
.ldc-h12-zaehler { color: rgba(255, 255, 255, .66); } .ldc-h12-zaehler b { color: #fff; }
.ldc-h12-linie { width: 100%; max-width: 260px; background: rgba(255, 255, 255, .2); } .ldc-h12-linie b { background: #fff; }
.ldc-h12-belege { right: auto; left: calc(59% + 56px); bottom: 40px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Runde 12 (21.09.2026, Marcel)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Überfahren weich: Elemente mit data-anim bekommen von bewegung.js einen eigenen Übergang
(opacity, transform); der überschrieb den Übergang für translate/background, deshalb
„ploppte" das Überfahren. Hier stehen alle Eigenschaften gemeinsam. ─────────────── */
.ldc .ldc-s-weg[data-anim].ldc-drin, .ldc .ldc-s-kanal[data-anim].ldc-drin {
transition: translate .55s var(--v3-kurve), background .45s var(--v3-kurve), box-shadow .45s var(--v3-kurve), opacity .7s var(--v3-kurve), transform .7s var(--v3-kurve) !important;
transition-delay: 0s !important;
}
.ldc-s-weg i, .ldc-s-kanal i { transition: transform .55s var(--v3-kurve), background .35s ease; }
/* ── Pause-Knopf für laufende Bänder ───────────────────────────────────── */
.ldc .ldc-pause { position: absolute; z-index: 5; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tinte); box-shadow: 0 0 0 1px rgba(10, 23, 32, .08), 0 10px 24px -12px rgba(1, 25, 38, .5); cursor: pointer; transition: transform .3s var(--v3-kurve), background .3s ease; }
.ldc .ldc-pause:hover { background: #fff; color: var(--tinte); transform: scale(1.08); }
.ldc-pause svg { width: 16px; height: 16px; }
.ldc-pause .ldc-pause-aus, .ldc-pause[aria-pressed="true"] .ldc-pause-an { display: none; }
.ldc-pause[aria-pressed="true"] .ldc-pause-aus { display: block; }
.ldc-h11-huelle { position: relative; }
.ldc-h11-huelle.ist-pausiert .ldc-h11-spalte > span { animation-play-state: paused; }
.ldc-logos { position: relative; }
.ldc-logos .ldc-pause { position: static; grid-column: 1; justify-self: start; width: 34px; height: 34px; margin-top: -22px; background: var(--karte); box-shadow: none; }
.ldc-logos .ldc-pause svg { width: 13px; height: 13px; }
.ldc-logos > p { grid-column: 1; } .ldc-logos > .ldc-logoband { grid-column: 2; grid-row: 1 / span 2; }
.ldc-logos.ist-pausiert .ldc-logoband ul { animation-play-state: paused; }
@media (max-width: 1000px) { .ldc-logos > .ldc-logoband { grid-column: 1; grid-row: auto; } .ldc-logos .ldc-pause { margin-top: 0; position: absolute; right: 0; top: 30px; } }
@media (prefers-reduced-motion: reduce) { .ldc .ldc-pause { display: none; } }
/* ── Leistungen: Marken-Logos oben links bei der Überzeile, Stichworte im Bild ── */
.ldc .ldc-stapelkarte-marken { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 26px; }
.ldc-stapelkarte-marken .ldc-marke { padding: 12px 20px 12px 14px; gap: 12px; background: #fff; font-size: 1rem; box-shadow: 0 14px 30px -20px rgba(1, 25, 38, .45), inset 0 0 0 1px rgba(10, 23, 32, .06); }
.ldc-stapelkarte-marken .ldc-marke img { width: 28px !important; height: 28px !important; }
.ldc-stapelkarte-marken .ldc-marke img[src*="woocommerce"] { width: 44px !important; height: 44px !important; margin: -8px 0; }
.ldc-stapelkarte-bild figcaption span { padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--tinte); font-size: .8125rem; font-weight: 700; line-height: 1; }
/* ── Über uns: Pressemappe ─────────────────────────────────────────────── */
.ldc-mappe-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ldc .ldc-mappe-reiter button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 10px; border: 0; border-radius: 999px; background: var(--karte); color: var(--tinte); font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; line-height: 1; box-shadow: none; cursor: pointer; transition: background .3s var(--v3-kurve), color .3s var(--v3-kurve); }
.ldc-mappe-reiter button span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--tinte); font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .3s, color .3s; }
.ldc .ldc-mappe-reiter button:hover { background: var(--karte-tief); color: var(--tinte); }
.ldc .ldc-mappe-reiter button[aria-selected="true"] { background: var(--tinte); color: #fff; }
.ldc-mappe-reiter button[aria-selected="true"] span { background: rgba(255, 255, 255, .16); color: #fff; }
.ldc-mappe-reiter button:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.ldc-mappe-seite { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; border-radius: 36px; overflow: hidden; background: var(--karte); }
.ldc-mappe-seite[hidden] { display: none; }
.ldc-mappe-seite.ist-an .ldc-mappe-bild img { animation: ldcMappeBild 1.1s var(--v3-kurve) both; }
.ldc-mappe-seite.ist-an .ldc-mappe-text > * { animation: ldcMappeText .7s var(--v3-kurve) both; }
.ldc-mappe-seite.ist-an .ldc-mappe-text > *:nth-child(2) { animation-delay: .06s; } .ldc-mappe-seite.ist-an .ldc-mappe-text > *:nth-child(3) { animation-delay: .12s; } .ldc-mappe-seite.ist-an .ldc-mappe-text > *:nth-child(n+4) { animation-delay: .18s; }
@keyframes ldcMappeBild { from { clip-path: inset(0 100% 0 0); transform: scale(1.08); } to { clip-path: inset(0); transform: none; } }
@keyframes ldcMappeText { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ldc-mappe-bild { position: relative; margin: 0; min-height: 460px; background: var(--karte-tief); overflow: hidden; }
.ldc-mappe-bild img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 25%; }
.ldc-mappe-text { padding: 56px 56px 48px; align-self: center; }
.ldc .ldc-mappe-marke { margin: 0 0 14px; font-size: .875rem; font-weight: 700; color: var(--tinte-leise); }
.ldc .ldc-mappe-text h3 { margin: 0 0 20px; font-size: clamp(1.875rem, 3vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06; }
.ldc .ldc-mappe-text p { margin: 0 0 14px; padding: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--tinte-leise); max-width: 60ch; }
.ldc .ldc-mappe-anfang p:first-child { font-size: 1.25rem; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; color: var(--tinte); }
.ldc-mappe-rest { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--v3-kurve); }
.ldc-mappe-rest > div { overflow: hidden; opacity: 0; transition: opacity .5s ease; }
.ldc-mappe-text.ist-offen .ldc-mappe-rest { grid-template-rows: 1fr; } .ldc-mappe-text.ist-offen .ldc-mappe-rest > div { opacity: 1; transition-delay: .15s; }
.ldc .ldc-mappe-mehr { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--tinte); font: inherit; font-size: .9375rem; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1; box-shadow: none; cursor: pointer; transition: background .3s, color .3s; }
.ldc .ldc-mappe-mehr:hover { background: var(--tinte); color: #fff; }
.ldc-mappe-mehr svg { width: 16px; height: 16px; transition: transform .45s var(--v3-kurve); }
.ldc-mappe-mehr-zu, .ldc-mappe-mehr[aria-expanded="true"] .ldc-mappe-mehr-auf { display: none; }
.ldc-mappe-mehr[aria-expanded="true"] .ldc-mappe-mehr-zu { display: inline; } .ldc-mappe-mehr[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 1000px) { .ldc-mappe-seite { grid-template-columns: 1fr; border-radius: 26px; } .ldc-mappe-bild { min-height: 0; aspect-ratio: 16 / 10; } .ldc-mappe-text { padding: 30px 26px 28px; } }
@media (max-width: 640px) { .ldc .ldc-mappe-reiter button { min-height: 44px; padding: 0 16px 0 8px; font-size: .875rem; } .ldc-mappe-reiter button span { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .ldc-mappe-seite.ist-an .ldc-mappe-bild img, .ldc-mappe-seite.ist-an .ldc-mappe-text > * { animation: none; } .ldc-mappe-rest { transition: none; } }
/* „ldc-marke" gab es schon in startseite.css (weiße Schrift auf dunklem Bild): hier ausdrücklich überschreiben */
.ldc .ldc-stapelkarte-marken .ldc-marke, .ldc .ldc-stapelkarte-marken .ldc-marke:hover { color: var(--tinte); background: #fff; font-weight: 800; letter-spacing: -.01em; text-transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; position: static; }
.ldc .ldc-stapelkarte-marken .ldc-marke { padding: 12px 20px 12px 14px; border-radius: 999px; font-size: 1rem; gap: 12px; }
/* Pause-Knopf der Logos: unter dem Text, nicht darüber */
.ldc-logos > p { grid-row: 1; align-self: end; } .ldc-logos .ldc-pause { grid-row: 2; margin-top: -30px; align-self: start; }
@media (max-width: 1000px) { .ldc-logos .ldc-pause { grid-row: auto; margin-top: 0; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 14 (21.09.2026): alle Google-Bewertungen
· Startseite: sieben ausgewählte Stimmen, die Zahlenkarte öffnet das Fenster
· Fenster „Alle Bewertungen": Kopf mit Anzahl und Verteilung, Filter nach Thema,
Mauerwerk in drei Spalten; Karten kommen gestaffelt herein
═══════════════════════════════════════════════════════════════════════════ */
/* ── Startseite ────────────────────────────────────────────────────────── */
.ldc button.ldc-meinung-zahl { appearance: none; border: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .5s var(--v3-kurve), box-shadow .5s var(--v3-kurve); }
.ldc button.ldc-meinung-zahl:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(1, 25, 38, .6); }
.ldc button.ldc-meinung-zahl:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.ldc-meinung-zahl > span { display: block; }
.ldc .ldc-meinung-google { display: flex; }
.ldc-meinung-mehr { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .875rem; font-weight: 700; transition: background .3s ease; }
.ldc-meinung-mehr svg { width: 15px; height: 15px; transition: transform .45s var(--v3-kurve); }
.ldc-meinung-zahl:hover .ldc-meinung-mehr { background: #fff; color: var(--tinte); }
.ldc-meinung-zahl:hover .ldc-meinung-mehr svg { transform: translateX(3px); }
.ldc button.ldc-pille { appearance: none; border: 0; font: inherit; cursor: pointer; }
.ldc-meinungen-fuss { display: flex; justify-content: center; margin-top: 36px; }
.ldc button.ldc-knopf { appearance: none; border: 0; font: inherit; cursor: pointer; }
.ldc-stimm-sterne svg.ist-leer, .ldc-bew svg.ist-leer { opacity: .22; }
/* ── Fenster ───────────────────────────────────────────────────────────── */
.ldc .ldc-bew { width: min(1240px, calc(100vw - 32px)); max-width: none; height: min(880px, calc(100dvh - 32px)); max-height: none; margin: auto; padding: 0; border: 0; border-radius: 32px; background: #fff; color: var(--tinte); overflow: hidden; }
.ldc-bew[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.ldc-bew::backdrop { background: rgba(1, 25, 38, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ldc-bew.ist-da[open] { animation: ldcBewEin .6s var(--v3-kurve) both; }
.ldc-bew[open]::backdrop { animation: ldcFensterGrund .4s ease both; }
@keyframes ldcBewEin { from { opacity: 0; transform: translateY(36px) scale(.975); } to { opacity: 1; transform: none; } }
.ldc-bew-kopf { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr) auto; gap: 32px; align-items: center; padding: 32px 36px 22px; border-bottom: 1px solid var(--linie); }
.ldc-bew-summe { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ldc-bew-g { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--karte); }
.ldc-bew-g svg { width: 30px; height: 30px; }
.ldc .ldc-bew-titel { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.ldc .ldc-bew-sterne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; font-size: .9375rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-bew-sterne span { display: inline-flex; gap: 2px; color: #f5a623; }
.ldc-bew-sterne svg { width: 18px; height: 18px; }
.ldc .ldc-bew-vert { list-style: none; display: grid; gap: 5px; margin: 0; padding: 0; }
.ldc-bew-vert li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 22px; align-items: center; gap: 10px; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.ldc-bew-vert i { display: block; height: 6px; border-radius: 6px; background: var(--karte); overflow: hidden; }
.ldc-bew-vert b { display: block; height: 100%; width: 100%; border-radius: 6px; background: #f5a623; transform-origin: 0 50%; transform: scaleX(var(--anteil, 0)); transition: transform 1s var(--v3-kurve) .25s; }
.ldc-bew:not(.ist-da) .ldc-bew-vert b { transform: scaleX(0); }
.ldc-bew-vert em { font-style: normal; text-align: right; }
.ldc-bew-aktion { display: flex; align-items: center; gap: 10px; }
.ldc-bew-aktion form { margin: 0; }
.ldc .ldc-bew-google { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--karte); color: var(--tinte); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .3s ease; }
.ldc .ldc-bew-google:hover { background: var(--karte-tief); color: var(--tinte); }
.ldc-bew-google svg { width: 15px; height: 15px; }
.ldc .ldc-bew-zu { display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--tinte); color: #fff; cursor: pointer; box-shadow: none; transition: transform .45s var(--v3-kurve), background .3s; }
.ldc .ldc-bew-zu:hover { background: #02415f; color: #fff; transform: rotate(90deg); }
.ldc-bew-zu svg { width: 18px; height: 18px; }
.ldc-bew-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 36px; border-bottom: 1px solid var(--linie); }
.ldc .ldc-bew-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; background: var(--karte); color: var(--tinte); font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; transition: background .25s ease, color .25s ease; }
.ldc-bew-filter button span { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 800; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.ldc .ldc-bew-filter button:hover { background: var(--karte-tief); color: var(--tinte); }
.ldc .ldc-bew-filter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.ldc-bew-filter button[aria-pressed="true"] span { background: rgba(255, 255, 255, .16); color: #fff; }
.ldc-bew-flaeche { overflow-y: auto; overscroll-behavior: contain; padding: 28px 36px 36px; background: #fafafa; }
.ldc-bew-mauer { display: flex; align-items: flex-start; gap: 18px; }
.ldc-bew-spalte { flex: 1 1 0; min-width: 0; }
.ldc-bew-karte { break-inside: avoid; display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 23, 32, .07); transition: box-shadow .35s ease, transform .45s var(--v3-kurve); }
.ldc-bew-karte:hover { box-shadow: 0 0 0 1px rgba(10, 23, 32, .14), 0 20px 40px -28px rgba(1, 25, 38, .4); transform: translateY(-3px); }
.ldc-bew-karte[hidden] { display: none; }
.ldc-bew.ist-da .ldc-bew-karte { animation: ldcBewKarte .6s var(--v3-kurve) both; animation-delay: calc(var(--n, 0) * 45ms + .15s); }
@keyframes ldcBewKarte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ldc-bew-karte-sterne { display: inline-flex; gap: 2px; color: #f5a623; }
.ldc-bew-karte-sterne svg { width: 16px; height: 16px; }
.ldc .ldc-bew-karte blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 1rem; font-weight: 500; font-style: normal; line-height: 1.6; color: var(--tinte); text-wrap: pretty; }
.ldc .ldc-bew-karte blockquote::before { content: none; }
.ldc-bew-karte figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linie); }
.ldc-bew-avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinte); color: #fff; font-size: .9375rem; font-weight: 800; }
.ldc-bew-avatar-logo { width: auto; min-width: 38px; height: 30px; padding: 0; border-radius: 0; background: none; }
.ldc-bew-avatar-logo img { height: 26px !important; width: auto !important; max-width: 110px; }
.ldc-bew-karte figcaption b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; }
.ldc-bew-karte figcaption small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); }
.ldc .ldc-bew-leer, .ldc .ldc-bew-ohne { margin: 8px 0 0; font-size: .9375rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-bew-ohne span { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0 10px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 23, 32, .07); color: var(--tinte); font-weight: 700; }
.ldc-bew-ohne em { display: inline-flex; gap: 1px; color: #f5a623; }
.ldc-bew-ohne svg { width: 12px; height: 12px; }
@media (max-width: 1000px) {
.ldc-bew-kopf { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; padding: 24px 24px 18px; }
.ldc .ldc-bew-vert { grid-column: 1 / -1; grid-row: 2; max-width: 420px; }
.ldc-bew-filter { padding: 12px 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ldc-bew-filter::-webkit-scrollbar { display: none; }
.ldc .ldc-bew-filter button { flex: none; }
.ldc-bew-flaeche { padding: 20px 24px 28px; }
}
@media (max-width: 640px) {
.ldc .ldc-bew { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
.ldc-bew-g { width: 48px; height: 48px; border-radius: 14px; } .ldc-bew-g svg { width: 24px; height: 24px; }
.ldc .ldc-bew-google { display: none; }
.ldc-bew-kopf { padding: 18px 16px 14px; } .ldc-bew-filter { padding: 10px 16px; } .ldc-bew-flaeche { padding: 16px 16px 24px; }
.ldc-bew-karte { padding: 20px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ldc-bew.ist-da[open], .ldc-bew.ist-da .ldc-bew-karte { animation: none; } .ldc-bew-vert b { transition: none; } }
/* Fenster am Handy: Kopf kompakt, damit die Bewertungen gleich sichtbar sind */
@media (max-width: 640px) { .ldc .ldc-bew-vert { display: none; } .ldc .ldc-bew-sterne { font-size: 0; margin-top: 6px; } .ldc .ldc-bew-sterne span { font-size: 1rem; } .ldc .ldc-bew-titel { font-size: 1.375rem; } .ldc-bew-kopf { align-items: center; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 15 (22.09.2026)
· Leistungen: jede Karte in ihrer eigenen Farbe, Schatten an der Oberkante,
damit die nächste Karte sichtbar über die vorige fährt
· KI-Karte: Chatfenster statt Foto
· Kundenstimmen: Mauerwerk, die Zahlenkarte ist klein und der erste Stein
═══════════════════════════════════════════════════════════════════════════ */
/* ── Leistungen ────────────────────────────────────────────────────────── */
.ldc .ldc-kartenstapel .ldc-stapelkarte,
.ldc .ldc-kartenstapel .ldc-stapelkarte:nth-child(even) { background: var(--sk-grund, #f1f1f2) !important; box-shadow: 0 -28px 60px -36px rgba(1, 25, 38, .38), inset 0 0 0 1px rgba(1, 25, 38, .05) !important; }
.ldc-kartenstapel .ldc-stapelkarte-nr span { background: var(--sk-akzent, var(--tinte)); }
.ldc .ldc-kartenstapel .ldc-stapelkarte-nr { color: var(--sk-akzent, var(--tinte)); }
.ldc-kartenstapel .ldc-stapelkarte-punkte svg { background: var(--sk-akzent, var(--tinte)); }
.ldc-kartenstapel .ldc-stapelkarte-bild { box-shadow: 0 30px 60px -40px rgba(1, 25, 38, .45); }
.ldc-stapelkarte-marken .ldc-marke img[src*="woocommerce"] { width: 40px !important; height: 40px !important; margin: -6px 0; }
/* KI: Chatfenster */
.ldc-ki-bild { display: grid; place-items: center; padding: 32px 32px 72px; background: radial-gradient(120% 90% at 100% 0%, #20a4a8 0%, transparent 55%), linear-gradient(150deg, #0d7a7e, #0b3f52) !important; }
.ldc-ki-chat { width: min(100%, 400px); padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 40px 70px -30px rgba(0, 20, 30, .6); display: flex; flex-direction: column; gap: 10px; }
.ldc-ki-kopf { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; border-bottom: 1px solid var(--linie); font-size: .9375rem; color: var(--tinte); }
.ldc-ki-kopf small { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-ki-punkt { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.ldc .ldc-ki-chat p { max-width: 82%; margin: 0; padding: 11px 15px; border-radius: 18px; font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.ldc .ldc-ki-du { align-self: flex-end; background: #0d7a7e; color: #fff; border-bottom-right-radius: 6px; }
.ldc .ldc-ki-bot { align-self: flex-start; background: #eef3f5; color: var(--tinte); border-bottom-left-radius: 6px; }
.ldc-ki-tippt { display: inline-flex; gap: 5px; padding: 14px 16px !important; }
.ldc-ki-tippt i { width: 7px; height: 7px; border-radius: 50%; background: rgba(1, 47, 71, .45); animation: ldcKiTippt 1.2s ease-in-out infinite; }
.ldc-ki-tippt i:nth-child(2) { animation-delay: .15s; } .ldc-ki-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes ldcKiTippt { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.ldc-ki-chat.ist-bereit > p { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s ease, transform .6s var(--v3-kurve); }
.ldc-ki-chat.ist-bereit > p:nth-of-type(1) { transform-origin: 100% 100%; transition-delay: .2s; }
.ldc-ki-chat.ist-bereit > p:nth-of-type(2) { transform-origin: 0 100%; transition-delay: 1.1s; }
.ldc-ki-chat.ist-bereit > p:nth-of-type(3) { transform-origin: 100% 100%; transition-delay: 2.1s; }
.ldc-ki-chat.ist-bereit > p:nth-of-type(4) { transform-origin: 0 100%; transition-delay: 2.8s; }
.ldc-ki-chat.ist-sichtbar > p { opacity: 1; transform: none; }
/* ── Kundenstimmen: Mauerwerk ──────────────────────────────────────────── */
.ldc-stimmen-mauer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ldc-stimm-spalte { display: grid; gap: 20px; min-width: 0; }
.ldc-stimm-huelle { margin: 0; }
.ldc .ldc-stimm-zahl { appearance: none; display: block; width: 100%; margin: 0; padding: 28px 28px 22px; border: 0; border-radius: 24px; background: var(--v3-nacht); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: translate .5s var(--v3-kurve), box-shadow .5s var(--v3-kurve); }
.ldc .ldc-stimm-zahl:hover { translate: 0 -4px; box-shadow: 0 30px 60px -34px rgba(1, 25, 38, .6); color: #fff; }
.ldc .ldc-stimm-zahl:focus-visible { outline: 3px solid var(--blau); outline-offset: 4px; }
.ldc-stimm-zahl-oben { display: flex; align-items: baseline; gap: 12px; }
.ldc-stimm-zahl-oben b { font-size: clamp(3rem, 4.4vw, 4rem); font-weight: 800; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.ldc-stimm-zahl-oben > span { font-size: 1.0625rem; font-weight: 700; color: rgba(255, 255, 255, .78); }
.ldc-stimm-zahl-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .8); }
.ldc-stimm-zahl-unten b { color: #fff; }
.ldc-stimm-zahl-unten .ldc-stimm-sterne svg { width: 16px; height: 16px; }
.ldc-stimm-zahl-mehr { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .875rem; font-weight: 700; transition: background .3s ease, color .3s ease; }
.ldc-stimm-zahl-mehr svg { width: 15px; height: 15px; transition: transform .45s var(--v3-kurve); }
.ldc-stimm-zahl:hover .ldc-stimm-zahl-mehr { background: #fff; color: var(--tinte); }
.ldc-stimm-zahl:hover .ldc-stimm-zahl-mehr svg { transform: translateX(3px); }
.ldc-stimm-karte { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px 26px 22px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: translate .5s var(--v3-kurve), box-shadow .4s ease; }
.ldc-stimm-karte:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(10, 23, 32, .16), 0 24px 50px -32px rgba(1, 25, 38, .45); }
.ldc-stimm-kopf { display: flex; align-items: center; justify-content: space-between; }
.ldc-stimm-kopf .ldc-stimm-sterne svg { width: 17px; height: 17px; }
.ldc-stimm-zeichen { width: 30px; height: 22px; fill: var(--blau); opacity: .28; }
.ldc .ldc-stimm-karte blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 1.0625rem; font-weight: 500; font-style: normal; line-height: 1.6; letter-spacing: -.005em; color: var(--tinte); text-wrap: pretty; }
.ldc .ldc-stimm-karte blockquote::before { content: none; }
.ldc-stimm-karte figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); }
.ldc-stimm-karte figcaption img { height: 28px; width: auto; max-width: 130px; object-fit: contain; }
.ldc-stimm-karte figcaption i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinte); color: #fff; font-style: normal; font-weight: 800; font-size: .9375rem; }
.ldc-stimm-karte figcaption b { display: block; font-size: .9375rem; font-weight: 800; color: var(--tinte); }
.ldc-meinungen-fuss { margin-top: 20px; }
@media (max-width: 700px) {
.ldc-stimmen-mauer, .ldc-stimm-spalte { grid-template-columns: 1fr; gap: 12px; }
.ldc-ki-bild { padding: 22px 18px 64px; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-ki-chat.ist-bereit > p { opacity: 1; transform: none; transition: none; }
.ldc-ki-tippt i { animation: none; }
}
@media (min-width: 701px) and (max-width: 1100px) { .ldc-stimmen-mauer { grid-template-columns: 1fr 1fr; } .ldc-stimm-spalte:nth-child(3) { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 16 (22.09.2026): Anfrage-Block links neu
Ein großer Satz, der beim Scrollen Wort für Wort weiß wird; darunter die Wege
und zwei Kacheln: Bürozeiten mit Live-Status und Büro mit Route.
═══════════════════════════════════════════════════════════════════════════ */
.ldc-anfrage-block .ldc-anfrage-links { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.ldc .ldc-anfrage-marke { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .01em; color: rgba(255, 255, 255, .72); }
.ldc-anfrage-marke span { width: 8px; height: 8px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 5px rgba(31, 177, 251, .18); }
.ldc .ldc-anfrage-satz { margin: 0; font-size: clamp(2rem, 3.3vw, 3.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; color: #fff; text-wrap: balance; }
.ldc-anfrage-satz .ldc-lw { color: #fff; opacity: .22; transition: opacity .35s linear; }
.ldc-anfrage-satz .ldc-lw.ist-an { opacity: 1; }
.ldc-anfrage-block .ldc-wege { margin: 0; }
.ldc-anfrage-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ldc .ldc-anfrage-info { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 18px; border-radius: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; text-decoration: none; transition: background .35s ease; }
.ldc a.ldc-anfrage-info:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ldc .ldc-anfrage-info-titel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .66); }
.ldc .ldc-anfrage-zeiten { display: grid; gap: 8px; margin: 0; }
.ldc-anfrage-zeiten div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.ldc-anfrage-zeiten dt { font-size: .9375rem; font-weight: 500; color: rgba(255, 255, 255, .78); }
.ldc-anfrage-zeiten dd { margin: 0; font-size: .9375rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ldc .ldc-anfrage-adresse { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.45; color: #fff; }
.ldc-anfrage-route { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: .875rem; font-weight: 700; color: rgba(255, 255, 255, .78); transition: color .3s ease; }
.ldc-anfrage-route svg { width: 14px; height: 14px; transition: transform .45s var(--v3-kurve); }
.ldc-anfrage-ort:hover .ldc-anfrage-route { color: #fff; }
.ldc-anfrage-ort:hover .ldc-anfrage-route svg { transform: translate(2px, -2px); }
/* Live-Status */
.ldc-offen { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .82); }
.ldc-offen[hidden] { display: none; }
.ldc-offen i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.ldc-offen.ist-offen { background: rgba(52, 211, 153, .16); color: #a7f3d0; }
.ldc-offen.ist-offen i { background: #34d399; animation: ldcPuls 2s ease-out infinite; }
@media (max-width: 640px) {
.ldc-anfrage-infos { grid-template-columns: 1fr; }
.ldc .ldc-anfrage-satz { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) { .ldc-anfrage-satz .ldc-lw { opacity: 1; } .ldc-offen.ist-offen i { animation: none; } }
/* ═══ Runde 17 (22.09.2026): Siegel bei Hosting und KI, Bürozeiten-Kachel ═══ */
.ldc .ldc-siegel { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -4px 0 28px; padding: 0; max-width: 560px; }
.ldc-siegel li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -22px rgba(1, 25, 38, .4), inset 0 0 0 1px rgba(1, 25, 38, .05); }
.ldc-siegel-symbol { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--sk-akzent, var(--tinte)); color: #fff; }
.ldc-siegel-symbol svg { width: 19px; height: 19px; }
.ldc-siegel b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--tinte); }
.ldc-siegel small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--tinte-leise); }
@media (max-width: 480px) { .ldc .ldc-siegel { grid-template-columns: 1fr; } }
.ldc-anfrage-zeiten div { flex-direction: column; gap: 2px; }
.ldc .ldc-anfrage-adresse { font-size: 1rem; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 18 (22.09.2026 abends)
· Siegel als runde Label-Grafiken (teile/siegel.php)
· Wort im Hero-Titel: blauer Verlauf, weiße Schrift (Variante ?wort=hell)
· Facebook-Feed auf Aktuelles im Look der Website
═══════════════════════════════════════════════════════════════════════════ */
/* Siegel */
.ldc .ldc-siegel.ldc-siegel-bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 600px; margin: 0 0 30px; }
.ldc-siegel-bilder li { flex-direction: column; align-items: center; gap: 0; padding: 0; background: none; box-shadow: none; text-align: center; }
.ldc-siegel-bild { display: block; width: 100%; max-width: 104px; height: auto; margin-bottom: 12px; font-family: "Manrope LD", system-ui, sans-serif; filter: drop-shadow(0 14px 18px rgba(1, 25, 38, .22)); transition: transform .6s var(--v3-kurve); }
.ldc-siegel-bilder li:hover .ldc-siegel-bild { transform: rotate(-8deg) scale(1.06); }
.ldc-siegel-bilder b { font-size: .875rem; }
.ldc-siegel-bilder small { font-size: .75rem; }
@media (max-width: 480px) { .ldc .ldc-siegel.ldc-siegel-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } }
/* Wort im Hero-Titel */
.ldc .ldc-h .ldc-dreh { background: linear-gradient(100deg, #0a84c9, #1fb1fb); color: #fff; box-shadow: 0 22px 44px -22px rgba(10, 132, 201, .85); }
.ldc .ldc-h .ldc-dreh.ldc-dreh-hell { background: #dcf0fd; color: #0a6fb0; box-shadow: none; }
/* Facebook-Feed (Smash Balloon) auf Aktuelles */
.ldc-s-wall #cff, .ldc-s-wall #cff * { font-family: "Manrope LD", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.ldc-s-wall #cff .cff-item { padding: 22px !important; border-radius: 24px !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(10, 23, 32, .06), 0 24px 44px -34px rgba(1, 25, 38, .45) !important; border: 0 !important; }
.ldc-s-wall #cff .cff-author { display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important; }
.ldc-s-wall #cff .cff-author-img { order: -1; float: none !important; margin: 0 !important; width: 44px !important; height: 44px !important; }
.ldc-s-wall #cff .cff-author-img img { width: 44px !important; height: 44px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(10, 23, 32, .08); }
.ldc-s-wall #cff .cff-author-text { margin: 0 !important; padding: 0 !important; }
.ldc-s-wall #cff .cff-page-name a { font-size: 0 !important; color: var(--tinte) !important; text-decoration: none !important; }
.ldc-s-wall #cff .cff-page-name a::after { content: "Life Design"; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ldc-s-wall #cff .cff-story { display: none !important; }
.ldc-s-wall #cff .cff-date { margin-top: 2px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--tinte-leise) !important; }
.ldc-s-wall #cff .cff-post-text { margin: 0 0 16px !important; font-size: 15.5px !important; line-height: 1.6 !important; color: var(--tinte) !important; }
.ldc-s-wall #cff .cff-post-text a, .ldc-s-wall #cff .cff-expand a { color: #0a6fb0 !important; font-weight: 700 !important; text-decoration: none !important; }
.ldc-s-wall #cff .cff-media-wrap, .ldc-s-wall #cff .cff-photo, .ldc-s-wall #cff .cff-html5-video, .ldc-s-wall #cff .cff-media-wrap img, .ldc-s-wall #cff .cff-photo img { border-radius: 16px !important; overflow: hidden; }
.ldc-s-wall #cff .cff-cta-link { display: inline-flex !important; align-items: center; min-height: 40px; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; background: var(--karte) !important; color: var(--tinte) !important; font-size: 14px !important; font-weight: 700 !important; }
.ldc-s-wall #cff .cff-meta-wrap { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--linie); }
.ldc-s-wall #cff .cff-meta, .ldc-s-wall #cff .cff-post-links, .ldc-s-wall #cff .cff-post-links a { font-size: 13px !important; font-weight: 600 !important; color: var(--tinte-leise) !important; background: none !important; border: 0 !important; }
.ldc-s-wall #cff .cff-view-comments { background: var(--karte) !important; border-radius: 999px !important; }
.ldc-s-wall #cff .cff-load-more { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; margin-top: 24px !important; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; background: var(--tinte) !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 19 (22.09.2026): Facebook-Feed nachgeschärft
· Name und Datum stehen direkt neben dem Profilbild (Smash Balloon rückt sie
sonst um 50px ein)
· Der Knopf aus dem Beitrag („Call Now") als Pille im Look der Website, auf Deutsch
═══════════════════════════════════════════════════════════════════════════ */
.ldc-s-wall #cff .cff-author .cff-page-name, .ldc-s-wall #cff .cff-author .cff-date { margin-left: 0 !important; padding-left: 0 !important; }
.ldc-s-wall #cff .cff-author .cff-author-img, .ldc-s-wall #cff .cff-author .cff-author-img img { width: 44px !important; height: 44px !important; min-width: 44px; }
.ldc-s-wall #cff .cff-author .cff-author-img a { display: block; }
.ldc-s-wall #cff p.cff-cta-link { display: block !important; width: auto !important; min-height: 0; margin: 4px 0 18px !important; padding: 0 !important; background: none !important; }
.ldc-s-wall #cff p.cff-cta-link a { display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: var(--tinte) !important; color: #fff !important; font-size: 14.5px !important; font-weight: 700 !important; text-decoration: none !important; transition: background .3s ease; }
.ldc-s-wall #cff p.cff-cta-link a:hover { background: #02415f !important; }
.ldc-s-wall #cff p.cff-cta-link a[href^="tel:"] { font-size: 0 !important; }
.ldc-s-wall #cff p.cff-cta-link a[href^="tel:"]::after { content: "Jetzt anrufen"; font-size: 14.5px; }
.ldc-s-wall #cff p.cff-cta-link a[href^="tel:"]::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 20 (22.09.2026, spät)
· Plaketten bei Hosting und KI statt der großen runden Siegel (teile/siegel.php)
· Keine Schlagschatten mehr (Marcel: „überall diese Schlagschatten weg, auch bei Google,
beim Button und beim Farb-Label im Titel"). Feine 1-px-Ränder bleiben, wo sie Flächen trennen.
· Bewertungen: Links statt Knöpfe, sie führen direkt zu Google
· Rechtsseiten (teile/rechtstext.php)
═══════════════════════════════════════════════════════════════════════════ */
/* Plaketten */
.ldc .ldc-plaketten { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; max-width: 620px; margin: 0 0 28px; padding: 0; }
.ldc-plaketten li { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 23, 32, .09); }
.ldc-plakette-zeichen { flex: none; display: block; width: 30px; height: 30px; }
.ldc-plaketten b { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: -.005em; line-height: 1.2; color: var(--tinte); white-space: nowrap; }
.ldc-plaketten small { display: block; font-size: .6875rem; font-weight: 600; line-height: 1.25; color: var(--tinte-leise); white-space: nowrap; }
/* Schlagschatten weg */
.ldc .ldc-knopf, .ldc .ldc-knopf:hover,
.ldc .ldc-stapelkarte-0 .ldc-knopf.ldc-knopf-ruhig:hover,
.ldc .ldc-h .ldc-dreh,
.ldc .ldc-h-wahl,
.ldc-weg-schritt.ist-an .ldc-weg-nr,
.ldc-projekt-zeiger,
.ldc-marke,
.ldc-h-karte,
.ldc-h2-bild img,
.ldc-h4-geraet,
.ldc-h10-karte,
.ldc .ldc-stimm-zahl:hover,
.ldc button.ldc-meinung-zahl:hover { box-shadow: none !important; }
.ldc .ldc-gbadge, .ldc .ldc-gbadge:hover,
.ldc-geraet, .ldc-h1-karte, .ldc-hw,
.ldc .ldc-pause { box-shadow: 0 0 0 1px rgba(10, 23, 32, .1) !important; }
.ldc-stapelkarte-marken .ldc-marke { box-shadow: inset 0 0 0 1px rgba(10, 23, 32, .08) !important; }
.ldc-frage.ist-offen { box-shadow: 0 0 0 1.5px rgba(31, 177, 251, .45) !important; }
.ldc-stimm-karte:hover { box-shadow: inset 0 0 0 1px rgba(10, 23, 32, .16) !important; }
.ldc-s-wall #cff .cff-item { box-shadow: 0 0 0 1px rgba(10, 23, 32, .07) !important; }
.ldc-kontakt .ld-anfrage, .ld-anfrage { box-shadow: none !important; }
.ld-anfrage-chip input:checked + span,
.ld-anfrage .ld-anfrage-weiter, .ld-anfrage .ld-anfrage-senden,
.ld-anfrage .ld-anfrage-weiter:hover, .ld-anfrage .ld-anfrage-senden:hover { box-shadow: none !important; }
/* Bewertungen als Links */
.ldc a.ldc-stimm-zahl, .ldc a.ldc-stimm-zahl:hover { text-decoration: none; color: #fff; }
.ldc a.ldc-pille { text-decoration: none; }
/* Rechtsseiten */
.ldc-recht { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.ldc-recht-seite { position: sticky; top: 120px; display: grid; gap: 28px; }
.ldc .ldc-recht-klein { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--tinte-leise); }
.ldc-recht-seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ldc-recht-seite li { margin: 0; }
.ldc .ldc-recht-seite nav a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--tinte); font-size: 1rem; font-weight: 700; text-decoration: none; transition: background .3s ease; }
.ldc .ldc-recht-seite nav a:hover { background: var(--karte); }
.ldc .ldc-recht-seite nav a[aria-current="page"] { background: var(--tinte); color: #fff; }
.ldc-recht-kontakt { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--karte); }
.ldc-recht-kontakt .ldc-recht-klein { margin-bottom: 4px; }
.ldc .ldc-recht-kontakt a { color: var(--tinte); font-size: .9375rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ldc .ldc-recht-kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ldc-recht-text { max-width: 72ch; font-size: 1.0625rem; line-height: 1.75; color: #3f3f46; }
.ldc-recht-text .vc_row, .ldc-recht-text .wpb_column, .ldc-recht-text .vc_column-inner, .ldc-recht-text .wpb_wrapper, .ldc-recht-text .wpb_text_column { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; background: none !important; }
.ldc-recht-text .wpb_text_column + .wpb_text_column { margin-top: 1.4em !important; }
.ldc .ldc-recht-text h2 { margin: 0 0 .7em; font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; color: var(--tinte); }
.ldc .ldc-recht-text h3 { margin: 2em 0 .5em; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--tinte); }
.ldc-recht-text p { margin: 0 0 1.1em; }
.ldc-recht-text strong { color: var(--tinte); font-weight: 800; }
.ldc-recht-text p > strong:first-child { display: inline-block; margin-top: .8em; font-size: 1.125rem; letter-spacing: -.01em; }
.ldc-recht-text ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.ldc-recht-text li { margin: 0 0 .5em; padding-left: .2em; }
.ldc-recht-text li::marker { color: var(--blau-tief); }
.ldc .ldc-recht-text a { color: #0a6fb0; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(10, 111, 176, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.ldc .ldc-recht-text a:hover { text-decoration-color: currentColor; }
.ldc-recht-text .brlbs-cmpnt-container, .ldc-recht-text [class*="brlbs"] a, .ldc-recht-text [class*="brlbs"] button { font-family: inherit; }
@media (max-width: 900px) {
.ldc-recht { grid-template-columns: 1fr; gap: 32px; }
.ldc-recht-seite { position: static; grid-template-columns: 1fr; }
.ldc-recht-seite ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ldc .ldc-recht-seite nav a { padding: 9px 14px; background: var(--karte); }
.ldc-recht-kontakt { display: none; }
}
/* Beitragsbilder: Smash Balloon lässt .cff-photo links umfließen, ohne Breite. Das Bild mit
max-width: 100% schrumpfte darin auf 0 Pixel – die Beiträge standen ohne Bild da. Jetzt volle
Breite, und das Bild steht wie auf Facebook direkt unter dem Namen, vor dem Text. */
.ldc-s-wall #cff .cff-item { display: flex !important; flex-direction: column; }
.ldc-s-wall #cff .cff-item > .cff-author { order: -2; }
.ldc-s-wall #cff .cff-item > .cff-media-wrap, .ldc-s-wall #cff .cff-item > .cff-html5-video { order: -1; margin: 0 0 16px !important; }
.ldc-s-wall #cff .cff-media-wrap, .ldc-s-wall #cff .cff-media-wrap .cff-photo, .ldc-s-wall #cff .cff-media-wrap .cff-html5-video { float: none !important; width: 100% !important; max-width: none !important; height: auto !important; }
.ldc-s-wall #cff .cff-media-wrap img, .ldc-s-wall #cff .cff-html5-video img, .ldc-s-wall #cff .cff-html5-video video { display: block; float: none !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; }
.ldc-s-wall #cff .cff-media-wrap .cff-photo + .cff-photo { display: none !important; }
/* Runde 20b: Rechtsseiten nachgeschärft. Zephyr packt den Editor-Text in .l-section mit 72/45 px
Innenabstand (Text stand dadurch tiefer und weiter rechts als die Navigation). Listen mit Punkten.
Fett gesetzte Zwischenüberschriften der alten Texte („Cookies
") werden
hervorgehoben, fette Wörter im Satz nicht. */
.ldc-recht-text .l-section, .ldc-recht-text .l-section-h, .ldc-recht-text .g-cols { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; background: none !important; }
.ldc-recht-text ul { list-style: disc; }
.ldc-recht-text p > strong:first-child { display: inline; margin-top: 0; font-size: inherit; letter-spacing: inherit; }
.ldc-recht-text p > strong:first-child:has(+ br) { display: inline-block; margin-top: .8em; font-size: 1.125rem; letter-spacing: -.01em; }
.ldc .ldc-recht-text h2, .ldc .ldc-recht-text h3 { padding: 0; }
.ldc .ldc-recht-text h3 { margin-top: 1.6em; }
/* Runde 21 (22.09.2026): drei Plaketten nebeneinander (Marcel: „so nebeneinander, zu dritt").
„Server in Deutschland" und „KI in Deutschland" sind entfallen. */
.ldc .ldc-plaketten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 640px; }
.ldc-plaketten li { padding: 8px 12px 8px 8px; }
.ldc-plaketten b, .ldc-plaketten small { white-space: normal; }
@media (max-width: 560px) { .ldc .ldc-plaketten { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 22 (22.09.2026, spät)
· Ablauf neu (teile/ablauf.php): offene Spalten, Balken füllen sich der Reihe nach
· Karussell: Marken-Zeile auf der blauen Karte, weißer Knopf ohne Schatten
═══════════════════════════════════════════════════════════════════════════ */
.ldc .ldc-ablauf { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; }
.ldc-ab-schritt { --f: 0; display: flex; flex-direction: column; margin: 0; padding: 0; }
.ldc-ab-balken { display: block; height: 4px; margin-bottom: 30px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.ldc-ab-balken b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0a84c9, #1fb1fb); transform: scaleX(var(--f)); transform-origin: 0 50%; }
.ldc .ldc-ab-nr { display: block; margin-bottom: 26px; font-size: clamp(3.25rem, 5.4vw, 5rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; color: #d9dde1; font-variant-numeric: tabular-nums; transition: color .7s var(--v3-kurve); }
.ldc-ab-schritt.ist-an .ldc-ab-nr { color: var(--tinte); }
.ldc .ldc-ab-schritt h3 { margin: 0 0 12px; font-size: clamp(1.375rem, 1.8vw, 1.625rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--tinte); }
.ldc .ldc-ab-schritt p { margin: 0 0 22px; font-size: 1rem; line-height: 1.65; color: var(--tinte-leise); }
.ldc-ab-marke { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--karte); color: var(--tinte); font-size: .8125rem; font-weight: 700; line-height: 1.2; }
.ldc-ab-marke svg { flex: none; width: 14px; height: 14px; color: #0a84c9; }
.ldc-ab-schritt .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.ldc-bewegt) .ldc-ab-schritt { --f: 1; }
html:not(.ldc-bewegt) .ldc-ab-nr { color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .ldc-ab-schritt { --f: 1; } .ldc .ldc-ab-nr { color: var(--tinte); transition: none; } }
@media (max-width: 1000px) { .ldc .ldc-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; } }
@media (max-width: 600px) { .ldc .ldc-ablauf { grid-template-columns: 1fr; gap: 44px; } .ldc .ldc-ab-nr { margin-bottom: 16px; } }
/* Karussell */
.ldc-kk-wp { display: flex; align-items: center; gap: 14px; }
.ldc-kk-wp svg { flex: none; width: 44px; height: 44px; }
.ldc-kk-wp b { display: block; font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.ldc-kk-wp span { display: block; margin-top: 2px; font-size: .875rem; font-weight: 600; opacity: .78; }
.ldc .ldc-kk-weiss:hover { box-shadow: none; }
.ldc .ldc-kk .ldc-pille-tel { margin-top: auto; align-self: flex-start; font-variant-numeric: tabular-nums; }
.ldc .ldc-innenkarte { box-shadow: 0 0 0 1px rgba(10, 23, 32, .06) !important; }
.ldc .ldc-kk-grau a.ldc-pille-tel { padding: 12px 18px !important; border-radius: 999px; background: #fff !important; }
/* ═══════════════════════════════════════════════════════════════════════════
Runde 23 bis 28 (23.09.2026): die Grafiken der Leistungen stehen seit 1.28.0 in
assets/grafiken.css. Hier bleiben nur der Kartenstapel und die Handy-Korrektur.
═══════════════════════════════════════════════════════════════════════════ */
/* Jede Karte klebt erst, wenn sie ganz zu sehen war (--kleb aus grafiken.js) */
@media (min-width: 1001px) and (min-height: 720px) {
.ldc .ldc-kartenstapel .ldc-stapelkarte { top: var(--kleb, calc(96px + var(--i) * 10px)); }
}
/* Am Handy war die Textspalte der Leistungskarten breiter als der Bildschirm (433 px bei 390 px) */
@media (max-width: 1000px) {
.ldc .ldc-kartenstapel .ldc-stapelkarte { grid-template-columns: minmax(0, 1fr); }
.ldc-stapelkarte-text { min-width: 0; }
.ldc .ldc-stapelkarte h2 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ldc .ldc-stapelkarte-knoepfe .ldc-knopf { max-width: 100%; white-space: normal; text-align: left; }
}
/* Über uns: Ausschnitt des neuen Fotos */
.ldc-s-breitbild img.ldc-ueber-foto { object-position: 50% 6%; }
@media (max-width: 600px) {
/* Am Handy stehen die Kennzahlen unter dem Foto statt auf der Übergabe */
.ldc-s-breitbild:has(> img.ldc-ueber-foto) { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
.ldc-s-breitbild > img.ldc-ueber-foto { aspect-ratio: 4 / 3.4; height: auto !important; border-radius: var(--v3-r); object-position: 30% 40%; }
.ldc-s-breitbild:has(> img.ldc-ueber-foto) figcaption { position: static; margin-top: 12px; gap: 8px; }
.ldc-s-breitbild:has(> img.ldc-ueber-foto) figcaption > span { background: var(--karte); }
}
/* ══ Film: Motion-Design-Reel zwischen Leistungen und Karten (seit 1.32.0) ══════
Der Rahmen wächst beim Hereinscrollen von 92 auf 100 Prozent (--film-p aus bewegung.js). */
.ldc-film-rahmen {
--film-p: 1;
position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
border-radius: calc(var(--v3-r) + 14px * (1 - var(--film-p)));
background: #eef1f4;
box-shadow: 0 50px 90px -60px rgba(10, 40, 70, .55);
transform: scale(calc(.92 + .08 * var(--film-p))); transform-origin: 50% 20%;
}
.ldc .ldc-film-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ldc-film-leiste { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.ldc-film-marke { display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 999px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 26px -16px rgba(10, 30, 60, .5); color: var(--tinte); font-size: .875rem; font-weight: 700; line-height: 1; }
.ldc-film-marke i { width: 8px; height: 8px; border-radius: 50%; background: #1fb1fb; box-shadow: 0 0 0 0 rgba(31, 177, 251, .5); animation: ldcFilmPuls 2s ease-out infinite; }
@keyframes ldcFilmPuls { to { box-shadow: 0 0 0 9px rgba(31, 177, 251, 0); } }
.ldc-film-rahmen.ist-angehalten .ldc-film-marke i { animation: none; background: #9aa6b2; }
.ldc .ldc-film-knopf {
appearance: none; pointer-events: auto; display: grid; place-items: center;
width: 50px; height: 50px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .92); color: var(--tinte); cursor: pointer;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 10px 26px -14px rgba(10, 30, 60, .55);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s ease;
}
.ldc .ldc-film-knopf:hover, .ldc .ldc-film-knopf:focus-visible { transform: scale(1.08); background: #fff; color: var(--tinte); }
.ldc .ldc-film-knopf:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 3px; }
.ldc-film-knopf svg { width: 18px; height: 18px; }
.ldc-film-knopf .ldc-film-spielen, .ldc-film-rahmen.ist-angehalten .ldc-film-pause { display: none; }
.ldc-film-rahmen.ist-angehalten .ldc-film-spielen { display: block; }
@media (max-width: 600px) {
.ldc-film-rahmen { border-radius: 20px; transform: none; }
.ldc-film-rahmen.ist-hoch { aspect-ratio: 4 / 5; }
.ldc-film-leiste { left: 12px; right: 12px; bottom: 12px; }
.ldc-film-marke { display: none; }
.ldc .ldc-film-knopf { width: 40px; height: 40px; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-film-rahmen { transform: none; }
.ldc-film-marke i { animation: none; }
}
/* Film: Knopf für den Ton (seit 1.32.3). Das Video startet stumm, „Ton an" schaltet ein. */
.ldc-film-knoepfe { display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; margin-left: auto; }
.ldc .ldc-film-ton {
appearance: none; display: inline-flex; align-items: center; gap: 8px;
height: 50px; min-height: 0; margin: 0; padding: 0 18px 0 15px; border: 0; border-radius: 999px;
background: rgba(255, 255, 255, .92); color: var(--tinte); cursor: pointer;
font-family: inherit; font-size: .875rem; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 10px 26px -14px rgba(10, 30, 60, .55);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, color .2s ease;
}
.ldc .ldc-film-ton:hover, .ldc .ldc-film-ton:focus-visible { transform: scale(1.05); background: #fff; color: var(--tinte); }
.ldc .ldc-film-ton:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 3px; }
.ldc-film-ton svg { width: 20px; height: 20px; flex: none; }
.ldc-film-ton .ldc-film-laut, .ldc-film-rahmen.ist-laut .ldc-film-ton .ldc-film-leise { display: none; }
.ldc-film-rahmen.ist-laut .ldc-film-ton .ldc-film-laut { display: block; }
.ldc .ldc-film-rahmen.ist-laut .ldc-film-ton { background: #0a1720; color: #fff; }
@media (max-width: 600px) {
.ldc .ldc-film-ton { height: 40px; padding: 0 11px; }
.ldc-film-ton span { display: none; }
}
/* ══ Film im Hero: Knopf „Film ansehen" und Lightbox (seit 1.32.3) ═══════════════ */
.ldc .ldc-film-start {
appearance: none; display: inline-flex; align-items: center; gap: 12px;
min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
color: var(--tinte); cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none;
}
.ldc-film-start-kreis {
position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
background: #fff; color: #0a84c9;
box-shadow: 0 0 0 1px rgba(10, 23, 32, .08), 0 14px 28px -16px rgba(10, 40, 70, .5);
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, color .25s ease;
}
.ldc-film-start-kreis::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(31, 177, 251, .5); animation: ldcFilmRing 2.6s cubic-bezier(.22, 1, .36, 1) infinite; pointer-events: none; }
@keyframes ldcFilmRing { 0% { transform: scale(.82); opacity: 1; } 70%, 100% { transform: scale(1.38); opacity: 0; } }
.ldc-film-start-kreis svg { width: 19px; height: 19px; margin-left: 3px; }
.ldc .ldc-film-start:hover .ldc-film-start-kreis, .ldc .ldc-film-start:focus-visible .ldc-film-start-kreis { transform: scale(1.1); background: linear-gradient(135deg, #0a84c9, #1fb1fb); color: #fff; }
.ldc .ldc-film-start:hover, .ldc .ldc-film-start:focus { color: var(--tinte); background: none; }
.ldc .ldc-film-start:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 5px; border-radius: 999px; }
html.ldc-lb-offen { overflow: hidden; }
.ldc dialog.ldc-lightbox {
position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
margin: 0; padding: clamp(16px, 4vw, 56px); border: 0; background: transparent; color: var(--tinte);
display: none; place-items: center; overflow: hidden;
}
.ldc dialog.ldc-lightbox[open] { display: grid; }
.ldc dialog.ldc-lightbox::backdrop { background: rgba(10, 23, 32, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background .3s ease, backdrop-filter .3s ease; }
.ldc dialog.ldc-lightbox.ist-offen::backdrop { background: rgba(10, 23, 32, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ldc-lightbox-buehne {
position: relative; width: min(100%, 1400px, calc((100dvh - 112px) * 16 / 9)); aspect-ratio: 16 / 9;
border-radius: 24px; overflow: hidden; isolation: isolate; background: #eef1f4;
box-shadow: 0 70px 140px -50px rgba(0, 0, 0, .65);
opacity: 0; transform: translateY(18px) scale(.94);
transition: opacity .3s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.ldc dialog.ldc-lightbox.ist-offen .ldc-lightbox-buehne { opacity: 1; transform: none; }
.ldc dialog.ldc-lightbox.ist-hoch .ldc-lightbox-buehne { aspect-ratio: 4 / 5; width: min(100%, calc((100dvh - 110px) * 4 / 5)); border-radius: 20px; }
.ldc .ldc-lightbox-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; cursor: pointer; }
.ldc-lightbox-leiste { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 12px; }
.ldc dialog.ldc-lightbox .ldc-film-ton, .ldc dialog.ldc-lightbox .ldc-film-knopf { flex: none; }
.ldc dialog.ldc-lightbox.ist-laut .ldc-film-ton { background: #0a1720; color: #fff; }
.ldc dialog.ldc-lightbox.ist-laut .ldc-film-ton .ldc-film-leise, .ldc dialog.ldc-lightbox .ldc-film-ton .ldc-film-laut { display: none; }
.ldc dialog.ldc-lightbox.ist-laut .ldc-film-ton .ldc-film-laut { display: block; }
.ldc dialog.ldc-lightbox .ldc-film-knopf .ldc-film-spielen, .ldc dialog.ldc-lightbox.ist-angehalten .ldc-film-knopf .ldc-film-pause { display: none; }
.ldc dialog.ldc-lightbox.ist-angehalten .ldc-film-knopf .ldc-film-spielen { display: block; }
.ldc .ldc-lightbox-zu {
appearance: none; position: absolute; top: clamp(12px, 2.4vw, 26px); right: clamp(12px, 2.4vw, 26px); z-index: 3;
display: grid; place-items: center; width: 50px; height: 50px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .95); color: var(--tinte); cursor: pointer; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5);
opacity: 0; transform: scale(.8); transition: opacity .3s ease .1s, transform .45s cubic-bezier(.34, 1.56, .64, 1) .1s;
}
.ldc dialog.ldc-lightbox.ist-offen .ldc-lightbox-zu { opacity: 1; transform: none; }
.ldc .ldc-lightbox-zu:hover, .ldc .ldc-lightbox-zu:focus-visible { background: #fff; color: var(--tinte); transform: scale(1.08) rotate(90deg); }
.ldc .ldc-lightbox-zu:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 3px; }
.ldc-lightbox-zu svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
.ldc dialog.ldc-lightbox { padding: 64px 12px 16px; }
.ldc-lightbox-leiste { left: 12px; right: 12px; bottom: 12px; gap: 8px; }
.ldc .ldc-lightbox-zu { width: 44px; height: 44px; top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-film-start-kreis::before { animation: none; opacity: 0; }
.ldc-lightbox-buehne, .ldc .ldc-lightbox-zu, .ldc dialog.ldc-lightbox::backdrop { transition: none; }
}
/* Film-Band als Baustein (teile/film-band.php, seit 1.32.5): Abstand zum Inhalt darunter */
.ldc-film-platz { margin-bottom: clamp(36px, 5vw, 72px); }
.ldc-film-oben .ldc-film-platz { margin-bottom: 0; }
/* ══ Film-Vorschau läuft, Zeitleiste in der Lightbox (27.09.2026) ══════════════════════════
Marcel: die Vorschau „etwas größer", das Video soll darin „schon laufen", der Play-Knopf öffnet
den Film groß; in der Lightbox „eine Zeitleiste, wo ich zurückspulen kann". Ersetzt den Block
„Kleine Film-Vorschau" (1.33.1) und den alten Fortschrittsbalken der Lightbox.
Markup: teile/film-klein.php und teile/film-lightbox.php, Verhalten: bewegung.js
(filmVorschau(), zeitleiste()). */
/* ── Vorschau-Karte: Film oben, Text darunter ─────────────────────────── */
.ldc .ldc-film-klein {
appearance: none; position: relative; display: flex; flex-direction: column; align-items: stretch;
width: 340px; max-width: 100%; min-height: 0; margin: 0; padding: 7px; border: 0; border-radius: 22px;
background: var(--karte); color: var(--tinte); box-shadow: none; cursor: pointer; text-align: left;
font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; text-transform: none;
transition: background .3s var(--v3-kurve), transform .5s var(--v3-kurve), box-shadow .5s var(--v3-kurve);
}
.ldc .ldc-film-klein:hover, .ldc .ldc-film-klein:focus-visible {
background: var(--karte-tief); color: var(--tinte);
transform: translateY(-3px); box-shadow: 0 26px 44px -30px rgba(10, 40, 70, .5);
}
.ldc .ldc-film-klein:active { transform: scale(.985); transition-duration: .15s; }
.ldc .ldc-film-klein:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 3px; }
.ldc-film-klein-bild {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
border-radius: 15px; overflow: hidden; isolation: isolate; background: #eef1f4;
}
.ldc .ldc-film-klein-bild img, .ldc .ldc-film-klein-video {
position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0;
object-fit: cover; transition: transform .9s var(--v3-kurve), opacity .5s ease;
}
/* Der Film deckt das Standbild erst zu, wenn er wirklich läuft (Klasse ist-bewegt aus bewegung.js) */
.ldc .ldc-film-klein-video { opacity: 0; pointer-events: none; }
.ldc .ldc-film-klein.ist-bewegt .ldc-film-klein-video { opacity: 1; }
.ldc .ldc-film-klein:hover .ldc-film-klein-bild img, .ldc .ldc-film-klein:hover .ldc-film-klein-video { transform: scale(1.045); }
/* Ein Hauch Tiefe in der Mitte, damit der weiße Knopf auf dem hellen Film steht */
.ldc-film-klein-bild::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(closest-side, rgba(10, 23, 32, .2), rgba(10, 23, 32, 0));
box-shadow: inset 0 0 0 1px rgba(10, 23, 32, .06); border-radius: inherit;
transition: opacity .35s ease;
}
.ldc .ldc-film-klein:hover .ldc-film-klein-bild::after { opacity: .45; }
.ldc-film-klein-play {
position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center;
width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
background: rgba(255, 255, 255, .96); color: #0a84c9;
box-shadow: 0 16px 30px -12px rgba(10, 30, 60, .55);
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, color .25s ease;
}
.ldc-film-klein-play::before {
content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9);
animation: ldcFilmRing 2.6s cubic-bezier(.22, 1, .36, 1) infinite; pointer-events: none;
}
.ldc-film-klein-play svg { width: 21px; height: 21px; margin-left: 3px; }
.ldc .ldc-film-klein:hover .ldc-film-klein-play, .ldc .ldc-film-klein:focus-visible .ldc-film-klein-play {
transform: scale(1.1); background: linear-gradient(135deg, #0a84c9, #1fb1fb); color: #fff;
}
.ldc-film-klein-text { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 7px 6px 10px; }
.ldc-film-klein-zeilen { display: grid; gap: 4px; min-width: 0; }
.ldc-film-klein-zeilen b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ldc-film-klein-zeilen small { font-size: .8125rem; line-height: 1.3; color: var(--tinte-leise); }
.ldc-film-klein-gross {
flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
background: #fff; color: var(--tinte);
transition: transform .45s var(--v3-kurve), background .3s ease, color .3s ease;
}
.ldc-film-klein-gross svg { width: 15px; height: 15px; }
.ldc .ldc-film-klein:hover .ldc-film-klein-gross, .ldc .ldc-film-klein:focus-visible .ldc-film-klein-gross { background: var(--tinte); color: #fff; transform: scale(1.06); }
/* Startseite, Kopf der Projekte: Vorschau und „Mehr Projekte" nebeneinander, unten bündig mit dem Titel */
.ldc-kopf-rechts { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: nowrap; gap: 12px 16px; flex: none; }
/* Projekte-Seite: Vorschau unter den Sprungzielen, so breit wie die Textspalte */
.ldc-s-film { margin-top: 26px; }
.ldc .ldc-s-film .ldc-film-klein { width: 360px; }
/* Die Karte macht die rechte Spalte höher: der Titel steht deshalb mittig daneben statt unten,
sonst rutscht er bei 900 px Fensterhöhe unter den Rand */
.ldc-s-kopf-raster:has(.ldc-s-film) { align-items: center; }
@media (max-width: 760px) {
.ldc-kopf-rechts { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; flex: initial; }
}
@media (max-width: 600px) {
.ldc .ldc-film-klein, .ldc .ldc-s-film .ldc-film-klein { width: 100%; border-radius: 20px; }
.ldc-film-klein-bild { border-radius: 14px; }
.ldc-film-klein-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
}
/* ── Zeitleiste in der Lightbox ────────────────────────────────────────── */
/* Eine helle Pille wie die Knöpfe daneben; darin die Spur. Die ganze Pille ist Griffläche
(50 px hoch, am Handy 40 px), sie klickt und zieht an die Stelle auf der Spur. */
.ldc-lightbox-zeit {
--lb-p: 0; --lb-h: 0; --lb-rand: 22px;
position: relative; flex: 1; min-width: 0; height: 50px; border-radius: 999px;
background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 10px 26px -14px rgba(10, 30, 60, .55);
cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ldc-lightbox-zeit:focus { outline: none; }
.ldc-lightbox-zeit:focus-visible { outline: 3px solid #1fb1fb; outline-offset: 3px; }
.ldc-lightbox-spur {
position: absolute; left: var(--lb-rand); right: var(--lb-rand); top: 50%; height: 4px; margin-top: -2px;
border-radius: 999px; background: rgba(10, 23, 32, .12); overflow: hidden;
transition: transform .3s var(--v3-kurve);
}
.ldc .ldc-lightbox-spur i { position: absolute; inset: 0; display: block; border-radius: inherit; transform-origin: 0 50%; }
.ldc .ldc-lightbox-geladen { background: rgba(10, 23, 32, .1); transform: scaleX(0); }
.ldc .ldc-lightbox-lauf { background: linear-gradient(90deg, #0a84c9, #1fb1fb); transform: scaleX(var(--lb-p)); }
.ldc-lightbox-griff {
position: absolute; top: 50%; left: calc(var(--lb-rand) + var(--lb-p) * (100% - 2 * var(--lb-rand)));
width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
background: #fff; border: 3px solid #0a84c9; box-sizing: border-box;
box-shadow: 0 4px 12px -3px rgba(10, 40, 70, .5);
transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none;
}
/* Blase über dem Zeiger: die Zeit an dieser Stelle */
.ldc-lightbox-blase {
position: absolute; bottom: calc(100% + 12px); left: calc(var(--lb-rand) + var(--lb-h) * (100% - 2 * var(--lb-rand)));
padding: 7px 10px; border-radius: 10px; background: #0a84c9; color: #fff;
box-shadow: 0 8px 20px -10px rgba(10, 60, 110, .7);
font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
opacity: 0; transform: translate(-50%, 6px); pointer-events: none;
transition: opacity .2s ease, transform .35s var(--v3-kurve);
}
.ldc-lightbox-blase::after {
content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
background: inherit; border-radius: 0 0 2px 0; transform: rotate(45deg);
}
/* Uhr rechts über der Leiste: aktuell / gesamt */
.ldc-lightbox-uhr {
position: absolute; bottom: calc(100% + 12px); right: 4px; display: inline-flex; align-items: center; gap: 5px;
padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--tinte);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 8px 20px -12px rgba(10, 30, 60, .5);
font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap;
opacity: 0; transform: translateY(6px); pointer-events: none;
transition: opacity .2s ease, transform .35s var(--v3-kurve);
}
.ldc-lightbox-uhr-trenner { color: var(--tinte-leise); font-weight: 500; }
@media (hover: hover) {
.ldc-lightbox-zeit:hover .ldc-lightbox-spur { transform: scaleY(2); }
.ldc-lightbox-zeit:hover .ldc-lightbox-griff { transform: scale(1); }
.ldc-lightbox-zeit:hover .ldc-lightbox-blase { opacity: 1; transform: translate(-50%, 0); }
.ldc-lightbox-zeit:hover .ldc-lightbox-uhr { opacity: 1; transform: none; }
}
.ldc-lightbox-zeit.ist-zieht .ldc-lightbox-spur, .ldc-lightbox-zeit:focus-visible .ldc-lightbox-spur { transform: scaleY(2); }
.ldc-lightbox-zeit.ist-zieht .ldc-lightbox-griff { transform: scale(1.2); }
.ldc-lightbox-zeit:focus-visible .ldc-lightbox-griff { transform: scale(1); }
.ldc-lightbox-zeit.ist-zieht .ldc-lightbox-blase { opacity: 1; transform: translate(-50%, 0); }
.ldc-lightbox-zeit.ist-zieht .ldc-lightbox-uhr, .ldc-lightbox-zeit:focus-visible .ldc-lightbox-uhr { opacity: 1; transform: none; }
.ldc-lightbox-zeit.ist-zieht .ldc-lightbox-spur { transition: none; }
/* Beim Spulen bleibt das Pause-Symbol stehen, der Film läuft ja gleich weiter */
.ldc dialog.ldc-lightbox.ist-angehalten.ist-spult .ldc-film-knopf .ldc-film-pause { display: block; }
.ldc dialog.ldc-lightbox.ist-angehalten.ist-spult .ldc-film-knopf .ldc-film-spielen { display: none; }
/* Kommt die Blase der Uhr zu nahe, tritt die Uhr zurück */
.ldc .ldc-lightbox-zeit.ist-eng .ldc-lightbox-uhr { opacity: 0; }
/* Ohne Maus (Handy, Tablet): Griff und Uhr immer da, die Spur etwas kräftiger */
@media (hover: none), (max-width: 600px) {
.ldc-lightbox-spur { height: 6px; margin-top: -3px; }
.ldc-lightbox-griff { transform: scale(1); }
.ldc-lightbox-uhr { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
.ldc-lightbox-zeit { height: 40px; --lb-rand: 16px; }
.ldc-lightbox-blase, .ldc-lightbox-uhr { bottom: calc(100% + 10px); font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
.ldc-film-klein-play::before { animation: none; opacity: 0; }
.ldc .ldc-film-klein, .ldc .ldc-film-klein-bild img, .ldc .ldc-film-klein-video { transition: none; }
.ldc .ldc-film-klein:hover, .ldc .ldc-film-klein:focus-visible { transform: none; }
.ldc .ldc-film-klein:hover .ldc-film-klein-bild img { transform: none; }
.ldc-lightbox-spur, .ldc-lightbox-griff, .ldc-lightbox-blase, .ldc-lightbox-uhr { transition: none; }
}
/* ══ Ende Film-Vorschau und Zeitleiste ══ */
/* ══ Über uns, Pressemappe: Lesefenster und wischbare Reiter (r35, 27.09.2026) ═══════════════════
„Ganzen Bericht lesen" klappt nicht mehr in der Karte auf (dabei wuchs das Foto links mit), sondern
öffnet den Bericht in einem Lesefenster (szenen.js, „mappe"). Die Karte behält immer ihre Größe.
Die alten .ldc-mappe-rest-Regeln oben bleiben nur für Browser ohne