/* ============================================================== leistung.css · Besitzer: P7 Leistungsseiten · v4 „Passer“ (25.09.2026) Markup: includes/leistungsseite.php + includes/zusatz-bausteine.php. Plan 8.5 (K40, K41, K45, K46), 11.3, 11.8. Nur Tokens (tokens.css), keine eigenen Farben, Radien, Schatten, Easings. Inhalt 1 K40 Unter-Hero (zweispaltig ab 60rem, Bogen-Stapel, Fakt-Etikett, Platten +-6 px ueber --p nur Desktop) 2 Einfuehrung (Ueber uns: Geschichte + Passer-Zahl) 3 K41 Medien-Reihe (Bogen 4:3 + Leuchtkasten-Karte, Zickzack ab 56rem, Riesenwort als Kontur-Ebene nur Desktop) + Piktogramm-Karten 4 Piktogramm auf der Platte (.l-platte) 5 K45 Vertrauen 6 K46 Fragen (offene Liste, nur innerhalb .l-faq; die gemeinsame FAQ-Optik K70 gehoert P10 - bis dahin hier eng begrenzt) 7 Fremde Bausteine in der Vorlage (Signalweg P5, Filme, Archiv P11) 8 Weiter-Zeilen innerhalb der Kapitel Rueckbau v3 (25.09.2026): die Leistungsseiten nutzen .bloecke/.block-l/ .block-nr (01/02/03 in grauen Kaesten) nicht mehr. Die Regeln stehen unveraendert am Dateiende, weil 404.php sie noch nutzt (Altbestand, Rueckbau durch P14, Aenderungswunsch im P7-Bericht). ============================================================== */ /* ---- 1 K40 Unter-Hero ------------------------------------------ */ .u-hero{padding-block:clamp(1.25rem, .9rem + 1.6vw, 2.25rem) var(--abstand-klein);overflow-x:clip} .u-hero-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.4rem + 2.4vw, 3.75rem);align-items:center} .u-hero-innen > *{min-width:0} @media (min-width:60rem){ .u-hero-innen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} .u-hero-innen--ohne-bild{grid-template-columns:minmax(0,1fr)} } .u-hero .brotkrumen{padding:0;margin:0 0 clamp(1.25rem, 1rem + 1.2vw, 2.25rem)} .u-hero h1{margin-bottom:1.1rem} .u-hero-lead{margin:0 0 1.9rem} /* Stapel: Hauptbogen (LCP-Kandidat) unten, Nebenbogen liegt oben rechts AUF dem Hauptbogen - er deckt nur Bildflaeche ab, nie den Rand mit der Angabe (KI-Hinweis, Notiz; Plan 12.1), auf keiner Breite. */ .u-hero-stapel{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-top:1.1rem} .u-hero-stapel > *{min-width:0} .u-hero-haupt{position:relative;grid-column:1 / -1;grid-row:1} .u-hero-haupt .bogen-bild img{aspect-ratio:3 / 2;object-fit:cover} .u-hero-haupt .bogen--browser .bogen-bild img,.u-hero-neben .bogen--browser .bogen-bild img{object-position:top} .u-hero-haupt .bogen-hoch .bogen-bild img{aspect-ratio:4 / 5} .u-hero-neben{display:none} .u-hero-neben .bogen-bild img{aspect-ratio:4 / 3;object-fit:cover} @media (min-width:60rem){ .u-hero-stapel:not(.u-hero-stapel--eins) .u-hero-haupt{grid-column:1 / 12;grid-row:2;margin-top:-17%} .u-hero-neben{display:block;grid-column:8 / -1;grid-row:1;position:relative;z-index:1} } /* Fakt-Etikett: klebt schraeg an der Oberkante des Hauptbogens, links - der Nebenbogen liegt rechts. Nur Faktenpaket-Werte. */ .u-hero-etikett{ position:absolute;top:-.85rem;left:clamp(.75rem, 5%, 1.75rem);z-index:2;margin:0; width:max-content;max-width:min(24rem, 85%);padding:.55rem .85rem;text-wrap:balance; background-color:var(--flaeche-licht);color:var(--text); border-radius:var(--r-chip);box-shadow:4px 4px 0 var(--platte), var(--sh-1); rotate:-2deg; } @media (min-width:60rem){ .u-hero-stapel:not(.u-hero-stapel--eins) .u-hero-etikett{max-width:58%} } /* 60-76rem: schmale Spalte - Nebenbogen kleiner, damit das Etikett Platz hat. */ @media (min-width:60rem) and (max-width:75.99rem){ .u-hero-neben{grid-column:9 / -1} .u-hero-stapel:not(.u-hero-stapel--eins) .u-hero-haupt{margin-top:-13%} } /* Siegel-Leiste (nur /schulungen.php, 07.10.2026, kh_siegel_schulung()): weisse Plakette, weil MCE-Siegel und Markenlogos fuer weissen Grund gemacht sind. Ruhig (Haarlinie + sh-1), der orchestrierte Moment bleibt der Bogen-Stapel. */ .u-siegel{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem 1rem; max-width:30rem;margin-top:clamp(1.25rem, 1rem + 1vw, 1.75rem);padding:.85rem 1.1rem; background-color:var(--lichtkasten);border:1px solid var(--line);border-radius:var(--r-karte);box-shadow:var(--sh-1); } .u-siegel-mce{display:block;height:3.25rem;width:auto} .u-siegel-titel{margin:0;font-weight:650;font-size:1rem;line-height:1.35;color:var(--text);text-wrap:balance} .u-siegel-nw{white-space:nowrap} /* Zweite Reihe ueber beide Spalten: Satz + Logos, durch eine Haarlinie abgesetzt */ .u-siegel-text{ grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem; margin:0;padding-top:.75rem;border-top:1px solid var(--line); font-size:.9375rem;line-height:1.4;color:var(--text); } .u-siegel-marken{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.25rem} .u-siegel-marke{display:block;height:1.4rem;width:auto} /* Platten +-6 px beim Scrollen (--p aus kern.js, nur Desktop). Ohne JS und bei reduzierter Bewegung fehlt --p: der Versatz steht statisch. */ @media (min-width:60rem) and (prefers-reduced-motion:no-preference){ .u-hero-haupt .bogen:not(:hover){--platte-v:calc(var(--versatz) + (var(--p, .5) - .5) * 12px)} .u-hero-neben .bogen:not(:hover){--platte-v:calc(var(--versatz) - (var(--p, .5) - .5) * 12px)} } /* ---- 2 Einfuehrung (Ueber uns) --------------------------------- */ .l-intro-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.5rem + 2vw, 3.5rem)} .l-intro-innen > *{min-width:0} .l-intro-text h2{margin-bottom:1.1rem;max-width:24ch} .l-intro-text .fliesstext{color:var(--muted);margin:0 0 1.1rem} .l-intro-text .fliesstext:last-child{margin-bottom:0} .l-intro-zahl .etikett{margin:0 0 .9rem} .l-zahl{margin:0} @media (min-width:56rem){ .l-intro-innen{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center} } /* ---- 3 K41 Medien-Reihe ------------------------------------------ */ .l-leistungen{overflow-x:clip} .l-leistungen-h{max-width:30ch;margin-bottom:var(--abstand-klein)} .mr{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:0 0 var(--abstand-klein)} .mr > *{min-width:0} .mr-bild{position:relative} .mr-bild .bogen{z-index:1} /* Bogen 4:3 (Plan K41); schmal 3:2, spart je Reihe gut 40 px Hoehe. */ .mr-bild .bogen-bild img{aspect-ratio:3 / 2;object-fit:cover} @media (min-width:56rem){ .mr-bild .bogen-bild img{aspect-ratio:4 / 3} } .mr-bild .bogen--browser .bogen-bild img{object-position:top} .mr-karte{ position:relative;z-index:2; background-color:var(--flaeche-licht);color:var(--text); border-radius:var(--r-karte);box-shadow:var(--sh-1); padding:clamp(1.25rem, .9rem + 1.6vw, 2.4rem); } .mr-karte h3{margin:0 0 .85rem} .mr-formate{margin:0 0 .9rem;color:var(--accent-text)} .mr-text{margin:0 0 1.3rem;color:var(--muted);max-width:62ch} .mr-daten{margin:0 0 1.5rem;border-top:1px solid var(--line)} .mr-daten div{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem;padding:.6rem 0;border-bottom:1px solid var(--line)} .mr-daten dt{ font-family:var(--schrift-titel);font-weight:620;font-stretch:96%; font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted); } .mr-daten dd{margin:0;font-family:var(--schrift-mono);font-size:clamp(.875rem, .85rem + .1vw, 1rem);line-height:1.45;color:var(--text)} @media (min-width:30rem){ .mr-daten div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.2rem 1rem;align-items:baseline} } /* Riesenwort (nur /digitalisierung): Kontur-Tiefenebene hinter dem Bogen. */ .mr-riesenwort{display:none} @media (min-width:56rem){ .mr{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:center} .mr-bild{grid-column:1 / span 7;grid-row:1} .mr-karte{grid-column:7 / -1;grid-row:1} .mr--rechts .mr-bild{grid-column:6 / -1} .mr--rechts .mr-karte{grid-column:1 / span 6} /* Bild rechts: die Karte liegt links ueber dem Bogen - Angabe auf dem Rand (KI-Hinweis) darum an den rechten Rand, nie verdeckt (Plan 12.1). */ .mr--rechts .bogen-rand{flex-direction:row-reverse} .mr-riesenwort{ display:block;position:absolute;z-index:0;top:-.66em;left:-.03em; font-family:var(--schrift-titel);font-weight:800;font-stretch:88%; font-size:clamp(4.25rem, 2.4rem + 8.2vw, 10.5rem);line-height:.8;letter-spacing:-.035em; white-space:nowrap;pointer-events:none;user-select:none; color:transparent;-webkit-text-stroke:1.5px color-mix(in oklch, var(--platte) 60%, transparent); } .mr--rechts .mr-riesenwort{left:auto;right:-.03em} .mr:has(.mr-riesenwort){margin-top:clamp(3.5rem, 1rem + 5.2vw, 7rem)} } @media (min-width:56rem) and (prefers-reduced-motion:no-preference){ .mr-riesenwort{translate:0 calc((var(--p, .5) - .5) * -44%)} } .ohne-deko .mr-riesenwort{display:none} /* Bloecke ohne Motiv: Leuchtkasten-Karten mit Piktogramm (statt 01/02/03). */ .l-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem, .8rem + 1vw, 1.6rem);margin:0 0 var(--abstand-klein)} .l-karte{ display:flex;flex-direction:column;align-items:flex-start;min-width:0; background-color:var(--flaeche-licht);color:var(--text); border-radius:var(--r-karte);box-shadow:var(--sh-1); padding:clamp(1.25rem, .9rem + 1.6vw, 2.2rem); } .l-karte h3{margin:1.25rem 0 .65rem;overflow-wrap:break-word;hyphens:auto} .l-karte p{margin:0 0 1.3rem;color:var(--muted)} .l-karte .btn{margin-top:auto} @media (min-width:48rem){ .l-karten{grid-template-columns:repeat(2,minmax(0,1fr))} .l-karten[data-anzahl="1"]{grid-template-columns:minmax(0,1fr);max-width:44rem} } @media (min-width:64rem){ .l-karten[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ---- 4 Piktogramm auf der Platte (Material: Platte + Haarlinie) ---- */ .l-platte{ display:inline-grid;place-items:center;flex:0 0 auto;width:3.5rem;height:3.5rem; background-color:var(--flaeche-licht);color:var(--accent-text);border-radius:var(--r-chip); box-shadow:5px 5px 0 var(--platte), -3px -3px 0 -2px var(--haar); } .l-platte .l-symbol{width:2.1rem;height:2.1rem} .ohne-deko .l-platte{box-shadow:none} /* ---- 5 K45 Vertrauen --------------------------------------------- */ .l-vertrauen-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.5rem + 2vw, 3.5rem)} .l-vertrauen-innen > *{min-width:0} @media (min-width:56rem){ .l-vertrauen-innen{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center} .l-vertrauen-innen--ohne-bild{grid-template-columns:minmax(0,1fr)} } .l-vertrauen-text h2{max-width:26ch} .l-vertrauen-text .fliesstext{color:var(--muted);margin:0} .l-punkte{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.2rem} .l-punkte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;color:var(--muted)} .l-punkte li > span{min-width:0} .l-punkte b{display:block;margin-bottom:.15rem;font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;color:var(--text)} .l-punkte .l-platte{width:2.4rem;height:2.4rem;box-shadow:4px 4px 0 var(--platte), -3px -3px 0 -2px var(--haar)} .l-punkte .l-symbol{width:1.35rem;height:1.35rem} .ohne-deko .l-punkte .l-platte{box-shadow:none} /* ---- 6 K46 Fragen: offene Liste mit Haarlinie, kein Kasten ------ */ .l-fragen .sub{margin-bottom:clamp(1.5rem, 1.2rem + 1vw, 2.25rem)} /* fix2 (Wunsch P10): .l-faq-Sonderoptik entfernt - K70 in faq.css gilt fuer alle Seiten. */ /* ---- 7 Fremde Bausteine in der Vorlage ----------------------------- Signalweg (P5), Filme (kh_videos, Optik P9), Teilnehmerstimmen (P11) rendern ihr eigenes .sect. Die Vorlage gibt nur die Flaeche; die v3-Haarlinie zwischen Sektionen entfaellt (Plan 7, Flaechenwechsel). */ .l-fremd > .sect{border-top:0;padding-bottom:var(--abstand-klein)} /* ---- 8 Weiter-Zeilen innerhalb der Kapitel ------------------------- Das Kapitel hat schon Polster unten; die Weiter-Zeile braucht nur Luft nach oben. In .l-fremd sitzt sie unter einer .sect mit eigenem Polster. */ :is(.l-leistungen, .l-vertrauen, .l-preise, .l-ergaenzungen) > .weiter{padding-block:clamp(.5rem, .2rem + 1vw, 1.25rem) 0} .l-fremd > .weiter{padding-block:0 var(--abstand-klein)} /* Pfeil an Knoepfen mit Peters Text: als CSS-Inhalt statt , damit der Knopftext im DOM wortgleich bleibt (texte-gleich.py). Alternativtext leer: Screenreader lesen den Pfeil nicht vor. Bewegung wie .btn .pfeil. */ .l-pfeil::after{ content:"\2192" / "";display:inline-block;margin-left:.55rem; transition:translate var(--t-kurz) var(--ease); } @media (hover:hover) and (pointer:fine){ .l-pfeil:hover::after{translate:4px 0} } /* Nie umbrechen: Telefonnummer, Spannen wie "4–14" (kh_l_text()). */ .nb{white-space:nowrap} /* Kicker und Etikett im Unter-Hero nie trennen (basis.css trennt p unter 40rem; Plan 6: hyphens nur im Fliesstext). */ .u-hero .kicker,.u-hero-etikett{hyphens:manual} /* ============================================================== ALTBESTAND v3 - nur noch fuer 404.php (unveraendert aus style.css). ============================================================== */ /* ---- Leistungsbloecke ---------------------------------------- */ /* ############################################################## NACHBESSERUNG 25.09.2026 (Design-Jury Befunde 1, 2, 6, 9; QA Laenge) ############################################################## */ /* Befund 2: H1-Groesse bleibt bei hoechstens 3rem (Peter 23.09., Sebastian 25.09. "keine riesen H1") - Obergrenze und Betonung kommen aus basis.css. */ .u-hero h1{max-width:none} .u-hero .cta-row{column-gap:1.25rem} /* Befund 9: Riesenwort steht UEBER dem Bogen (nicht halb verdeckt, keine Kollision mit der H2), Parallax nur noch +-6 %. */ @media (min-width:56rem){ .mr-riesenwort{top:auto;bottom:calc(100% - .1em)} .mr:has(.mr-riesenwort){margin-top:clamp(6rem, 1rem + 8vw, 9.5rem)} } @media (min-width:56rem) and (prefers-reduced-motion:no-preference){ .mr-riesenwort{translate:0 calc((var(--p, .5) - .5) * -12%)} } /* Befund 6 / QA Laengenbudget: Medien-Reihe unter 56rem kompakter - Bogen 16:9, Karte greift in den Bogen, Datenzeilen enger. */ @media (max-width:55.99rem){ .mr{gap:0} .mr-bild .bogen-bild img{aspect-ratio:16 / 9} .mr-karte{margin:-1.25rem .5rem 0;padding:1.15rem 1.15rem 1.25rem} .mr-karte h3{margin-bottom:.6rem} .mr-text{margin-bottom:1rem} .mr-daten{margin-bottom:1.15rem} .mr-daten div{padding:.4rem 0} } /* ---- 7b Bruecke fuer v3-Bausteine in .l-fremd (Rueckbau P12, 25.09.2026) ---- Seit der Montage der Startseite stehen die v3-Kaesten (.service, .proof, .refs-klein, Orts-Leiste, Fragen-Anreisser) nicht mehr in .l-fremd - die P4-Bausteine bringen ihr Material selbst mit. Per Scan aller 31 Routen + 404 + Muster P5/P11 gemessen: in .l-fremd stehen nur noch der kompakte Signalweg (Start), kh_videos (Webvideo, Business), die Signalweg-Buehne (Digitalisierung) und das Stimmen-Archiv (Schulungen, nur nach Freigabe). Gestrichen: Karten-Bruecke .service/.faq-paar/.ort-karte/.orte (auch auf .schild), Kicker-Strich per :has, .service::before/.ik-feld, .ref-rahmen, Wischreihe .services/.refs-klein, .proof .bogen, Kleinschrift fuer .ref-meta/.ref-leiste span/.micro/.ok-k/.orte-leiste-k/.vref-kunde (ohne Treffer bzw. setzt referenzen.css selbst auf >= 14 px, P9). Alter Stand: _backups-vor-aenderung-2026-09-25-p12-montage. - H2 buendig: das 26-px-Passer-Symbol entfaellt (Plan 6) - Signalweg kompakt und kh_videos geben es noch aus. - Bildangaben im Stimmen-Archiv (P11) auf allen Breiten >= 14 px. */ .l-fremd .sect-head > .passer{display:none} .l-fremd figcaption{font-size:.875rem} /* Startseite (index.php, P12): der kompakte Signalweg steht als letzter v3-Baustein in div.l-fremd.sb. Gleiche Polster und dieselbe einzeilige kompakte Weiter-Zeile wie die P4-Bausteine (.sb in bento.css), statt .sect-Polster + zweizeiliger Weiter-Zeile mobil. */ .l-fremd.sb > .sect{padding-block:0} .l-fremd.sb > .weiter{padding-block:clamp(1.25rem, .9rem + 1vw, 1.75rem) 0} /* ============================================================== REFERENZ-LINKS (06.10.2026, Peter: „auf allen Unterseiten Links, die zu den richtigen Referenzen springen“). Markup: includes/referenz-verweis.php - .pfeil-link gemeinsamer Textlink mit Pfeil (auch Garzweiler-Streifen) - .l-beleg ein konkretes Beispiel unter einem Leistungsblock - .l-refs Kasten „Aus unserer Arbeit“ im Vertrauens-Kapitel, Zahlen aus den Daten (keine zweite Pflegestelle) Ziele auf /referenzen.php markiert referenzen.css per :target. ============================================================== */ .pfeil-link{ display:inline-flex;align-items:baseline;gap:.4rem;min-height:24px; font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1.0625rem;line-height:1.35; color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em; text-decoration-color:var(--line-2); } .pfeil-link > span[aria-hidden]{display:inline-block;transition:translate var(--t-kurz) var(--ease)} .pfeil-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px} @media (hover:hover) and (pointer:fine){ .pfeil-link:hover > span[aria-hidden]{translate:4px 0} } .l-beleg{margin:-.35rem 0 1.25rem} .l-beleg .pfeil-link{font-size:1rem} .mr-karte .l-beleg{margin-top:-.25rem} .l-refs{margin:1.9rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line-2)} .l-refs .kicker{margin-bottom:.8rem} .l-refs-liste{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .l-refs-liste li{margin:0} @media (prefers-reduced-motion:reduce){ .pfeil-link > span[aria-hidden]{transition:none} } .erg .l-beleg{margin:1rem 0 0} /* 12.10.2026: Motiv im eigenen Seitenverhaeltnis (Katalog-Flag 'eigen', z. B. Peters Schulungs-Collage mit Logos am Rand) - kein 3:2-Zuschnitt im Unter-Hero. */ .u-hero-haupt .bogen-eigen .bogen-bild img{aspect-ratio:auto 4 / 3} /* 14.10.2026: auch in der Medien-Reihe (Sommersause-Arbeitsprobe auf /engagement.php, sonst mobil 16:9 = ein Viertel der Bildhoehe weg). */ .mr-bild .bogen-eigen .bogen-bild img{aspect-ratio:auto 4 / 3} /* "auto 4 / 3": bis das (lazy) Bild geladen ist, haelt 4:3 den Platz (sonst Hoehe 0 = CLS), danach gilt das echte Seitenverhaeltnis. Ein reines "auto" hebt die Abbildung von width/height auf das Seitenverhaeltnis auf. */ /* 14.10.2026: Peters Portraet - beim Zuschnitt (mobil 16:9) den Kopf behalten. */ .bogen-bild img[src*="foto-peter-portraet"]{object-position:50% 22%}