/* AK86 2026 – Leistungsübersicht (page-services.php). Richtung „großes Wort steht links“ (Alex 02.11.2026). */

/* Kopf */
.lv-hero { padding-bottom: clamp(30px, 6vh, 70px); }
.lv-hero h1 { font-size: clamp(48px, 8.4vw, 168px); }
.lv-sub { color: var(--static-seccolor); font-size: clamp(26px, 3.6vw, 70px); margin-top: .12em; }
.lv-lead { max-width: 52ch; }
.lv-hero .scrollcue { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.lv-intro { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; gap: clamp(20px, 4vw, 90px); padding: clamp(30px, 6vh, 70px) var(--gut) 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; color: rgba(var(--gridcolor-rgb),.82); }
.lv-intro p { margin: 0; }
.lv-intro .lv-claim span { display: block; }
.lv-intro p.lv-claim, .lv-intro p:last-child:nth-child(2) { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; font-size: clamp(32px, 3.6vw, 70px); color: var(--textcolor); } /* Alex 02.11.: „den Satz da noch größer“ */

/* Bereiche: links das stehende Wort mit Buchstaben-Effekt (Alex 02.11.: „links wieder hin mit dem geilen Typo-Effekt“), rechts die Kacheln */
.lv { position: relative; z-index: 2; padding: clamp(80px, 14vh, 160px) var(--gut) clamp(40px, 10vh, 120px); }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 110px); align-items: stretch; }
.lv-stick { position: sticky; top: calc(var(--abh, 0px) + 120px); }
/* Zähler wie auf Startseite und Projektübersicht (.lw-count in base.css) */
.lv-count { margin: 0 0 clamp(26px, 4vh, 48px); }
.lv-words { position: relative; }
.lv-w { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; }
.lv-w.on { position: relative; visibility: visible; }
.lv-word { display: inline-block; max-width: 100%; margin: 0; line-height: .9; font-size: clamp(48px, 7.6vw, 160px); vertical-align: top; }
/* Maske je Buchstabe: läuft auch bei zwei Zeilen sauber raus und rein */
.lv-word .cm { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em 0 .08em; margin: -.05em 0 -.08em; }
.lv-word i { font-style: normal; color: var(--static-maincolor); }
.lv-word .ch { display: inline-block; will-change: transform; }
/* Satz und Vorschautext des Bereichs (wörtlich aus der Bereichsbeschreibung, Alex 02.11.: „links auch noch einen Vorschautext“) */
.lv-wx { margin: clamp(18px, 3vh, 34px) 0 0; }
.lv-wl { margin: 0; max-width: 30ch; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.35; font-weight: 700; color: rgba(var(--gridcolor-rgb),.9); }
.lv-wt { margin: 12px 0 0; max-width: 46ch; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: rgba(var(--gridcolor-rgb),.75); }

.lv-g { position: relative; padding-bottom: clamp(120px, 26vh, 300px); }
.lv-g:last-child { padding-bottom: clamp(140px, 34vh, 380px); } /* Luft, damit das stehende Wort bis zur letzten Kachel bleibt (Alex 02.11.: „Service geht schneller weg“) */
.lv-gh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.7); }
.lv-gh span { color: var(--static-seccolor); }
.lv-gh em { margin-left: auto; font-style: normal; color: rgba(var(--gridcolor-rgb),.45); }
.lv-gl { display: none; }
.lv-tiles { display: grid; gap: 12px; }
.lv-t { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n h a" "n p a" "n m a"; column-gap: clamp(16px, 2vw, 32px); align-items: start; padding: clamp(22px, 2.2vw, 36px); min-height: clamp(150px, 15vw, 210px); color: var(--textcolor); text-decoration: none; }
/* Glas und Projektbilder als eigene Ebene: nur sie laufen unten aus, der Text bleibt voll stehen (wie der Kasten der Startseite) */
.lv-tbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: rgba(var(--gridcolor-rgb),.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .35s;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } /* einheitlich ab 58 % */
.lv-t > :not(.lv-tbg) { position: relative; z-index: 1; }
.lv-t:hover .lv-tbg, .lv-t:focus-visible .lv-tbg { background-color: rgba(var(--gridcolor-rgb),.15); }
.lv-tp { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity .6s; } /* Projektbilder in den Kacheln aus (Alex 02.11.: „vielleicht müssen wir hier die Bilder weglassen, das ist zu bunt alles“); zurück: display: block */
.lv-tp.on { opacity: 1; }
.lv-tbg:has(.lv-tp[style*="display: block"])::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(var(--bgcolor-rgb),.82) 0%, rgba(var(--bgcolor-rgb),.55) 50%, rgba(var(--bgcolor-rgb),.3) 100%); } /* Text links bleibt lesbar, rechts zeigt sich das Bild */
.lv-tn { grid-area: n; font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.5); padding-top: .5em; }
.lv-t h3 { grid-area: h; margin: 0; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(24px, 2.3vw, 44px); }
.lv-t p { grid-area: p; margin: 12px 0 0; max-width: 38ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.45; color: rgba(var(--gridcolor-rgb),.8); }
.lv-tm { grid-area: m; align-self: end; margin-top: 18px; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.55); }
.lv-ta { grid-area: a; align-self: center; font-size: clamp(22px, 2vw, 34px); line-height: 1; transition: transform .35s; }
.lv-t:hover .lv-ta { transform: translateX(6px); color: var(--static-seccolor); }

.lv-left, .lv-right { position: relative; z-index: 2; }

/* Schmale Fenster: kein stehendes Wort, Bereichsname über den Kacheln (Feinschliff im Mobil-Durchgang) */
@media (max-width: 900px) {
  .lv-intro { grid-template-columns: 1fr; }
  .lv-grid { grid-template-columns: 1fr; }
  .lv-left { display: none; }
  .lv-gh { font: 900 clamp(34px, 9vw, 60px)/.95 var(--f-ext); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em; color: var(--textcolor); flex-wrap: wrap; }
  .lv-gh span, .lv-gh em { font: 12px var(--f-mono); letter-spacing: .08em; }
  .lv-gh em { flex-basis: 100%; margin-left: 0; }
  .lv-gl { display: block; margin: 0 0 18px; font-size: 17px; font-weight: 700; }
  .lv-g { padding-bottom: 80px; }
}

/* ===================== Projektübersicht (page-projekte.php), Richtung „Bild-Raster mit Filter“ (Alex 02.11.2026) ===================== */
/* Kopf: vorgestelltes Projekt groß, über die volle Breite */
.pv-hero { --vw: calc(100vw - var(--sbw, 0px)); position: relative; z-index: 2; width: var(--vw); margin-left: calc(50% - var(--vw) / 2); height: 100svh; min-height: 680px; overflow: hidden; }
.pv-imgs { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } /* unten weicher Verlauf wie auf den Projektseiten (Alex 02.11.) */
.pv-img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.pv-img.on { opacity: 1; }
.pv-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; transform: scale(1.04); transition: transform 7s linear; }
.pv-img.on img { transform: scale(1); }
.pv-imgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--bgcolor-rgb),.88) 0%, rgba(var(--bgcolor-rgb),.5) 45%, rgba(var(--bgcolor-rgb),.08) 100%); }
.pv-hero-in { position: relative; z-index: 2; height: 100%; max-width: 1920px; margin: 0 auto; padding: calc(var(--abh, 0px) + 180px) var(--gut) clamp(70px, 11vh, 130px); display: flex; flex-direction: column; justify-content: flex-end; }
.pv-hero .scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; }
.pv-feat { position: relative; }
.pv-fk { display: block; margin-bottom: 18px; color: var(--static-seccolor); }
.pv-f { display: none; color: var(--textcolor); text-decoration: none; }
.pv-f.on { display: block; }
.pv-ft { display: block; font-size: clamp(44px, calc((100vw - 2 * var(--gut)) / 8.46), 260px); color: var(--textcolor); }
.pv-f .pv-fs { color: var(--acc, var(--main)); } /* Titel in Textfarbe wie auf der Projektseite, Untertitel in der Projektfarbe (Alex 06.11.2026) */ /* Name des Projekts so groß wie „Webdesign Düsseldorf“ (Alex 02.11.), projekte.js passt lange Namen an */
.pv-fa { color: inherit; text-decoration: none; }
/* Kein Pfeil hinter dem Namen beim Drüberfahren (Alex 02.11.: „diesen Pfeil bitte raus“), der Weg ins Projekt ist der Knopf „Projekt ansehen“ */
@media (min-width: 761px) { .pv-ft.clr { max-width: calc(100% - clamp(150px, 12vw, 240px)); } } /* mehrzeiliger Titel läuft nicht unter „Projekt ansehen“ (Alex 02.11.), projekte.js setzt .clr */
.pv-hero .pv-go { position: absolute; right: max(2vw, calc((var(--vw) - 1920px) / 2 + 2vw)); top: 24vh; z-index: 3; }
@media (max-width: 760px) { .pv-hero .pv-go { top: 92px; right: 2px; width: 116px; --bblur: 28px; } .pv-hero .pv-go span { font-size: 11px; } }
/* Faktenleiste wie auf der Projektseite */
.pv-hero .pv-facts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: clamp(26px, 4vh, 46px); }
.pv-hero .pv-facts dt { color: rgba(var(--gridcolor-rgb),.6); }
.pv-hero .pv-facts dd a { color: var(--textcolor); }
.team-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 0; padding: 0; }
.team-mini li { display: flex; align-items: center; gap: 8px; }
.team-mini img { display: block; width: 32px; height: 32px; object-fit: cover; object-position: top center; filter: grayscale(1); }
@media (max-width: 1023px) { .pv-hero .pv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pv-hero .pv-facts { grid-template-columns: 1fr 1fr; } }
/* Zähler wie bei den Leistungen (.lw-count in base.css), hier mit längerer Linie für bis zu 9 Projekte */
.pv-dots { margin: clamp(22px, 3vh, 34px) 0 0; }
.pv-dots .lw-bar { width: clamp(180px, 16vw, 300px); }

/* Raster */
.pv { position: relative; z-index: 2; padding: clamp(90px, 14vh, 170px) var(--gut) clamp(60px, 10vh, 120px); }
.pv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pv-h { margin: 0; font-size: clamp(40px, 5.2vw, 100px); } /* Abschnittsüberschrift 100 px wie überall (Alex 02.11.) */
.pv-count { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); }
.pv-count b { color: var(--textcolor); font-weight: 600; }
.pv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(26px, 4vh, 44px) 0 clamp(34px, 5vh, 60px); }
.pv-filter button { font: 600 15px/1 var(--f-body); color: var(--textcolor); background: none; border: 1px solid rgba(var(--gridcolor-rgb),.35); padding: 11px 14px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.pv-filter button i { font: normal 13px var(--f-mono); opacity: .6; margin-left: 6px; }
.pv-filter button:hover { border-color: var(--gridcolor); }
.pv-filter button.on { background: var(--static-maincolor); border-color: var(--static-maincolor); color: var(--static-white); }
.pv-filter button:focus-visible { outline: 2px solid var(--static-seccolor); outline-offset: 2px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 3.4vw, 64px) 12px; }
.pv-t { position: relative; display: flex; flex-direction: column; color: var(--textcolor); text-decoration: none; }
.pv-fig { position: relative; aspect-ratio: 3 / 2; margin: 0 0 18px; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); } /* läuft unten weich aus (Alex 02.11.); 3:2 wie das Hover-Bild der Startseite (Alex 02.11.: „zu hoch“) */
.pv-fig img { position: absolute; inset: 0; }
.pv-t:hover .pv-fig img, .pv-t:focus-visible .pv-fig img { filter: none; mix-blend-mode: normal; }
.pv-fig .pv-m { opacity: 0; transition: opacity .5s, filter .5s; filter: none; mix-blend-mode: normal; }
.pv-fig .pv-m.on { opacity: 1; }
.pv-tt { font-size: clamp(22px, 1.9vw, 36px); line-height: .95; transition: color .3s; }
.pv-t:hover .pv-tt { color: var(--acc, var(--textcolor)); }
.pv-tm { margin-top: 12px; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); }
.pv-tl { margin-top: 6px; font-size: 15px; line-height: 1.4; color: rgba(var(--gridcolor-rgb),.78); }
.pv-none { margin: 20px 0 0; font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.7); }
.pv-more { margin-top: clamp(90px, 14vh, 170px); padding-top: 24px; border-top: 1px solid var(--line); }
.pv-mh { margin: 0 0 26px; font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.6); }
.pv-more ul { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: clamp(20px, 3vw, 60px); }
.pv-more li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid rgba(var(--gridcolor-rgb),.08); font-size: 17px; color: rgba(var(--gridcolor-rgb),.82); }
.pv-more li span { font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb),.45); margin-left: 6px; }
@media (max-width: 1100px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-more ul { columns: 2; } }
@media (max-width: 640px) { .pv-grid { grid-template-columns: 1fr; } .pv-more ul { columns: 1; } .pv-hero-in { padding-top: calc(var(--abh, 0px) + 150px); } }