/* ======================================================================== Textseiten V2 — Über uns, Branchenreport, 404 Wird NACH lp.css geladen und gilt ausschließlich unter . lp.css bleibt unangetastet, weil es weiterhin ki-schnell-check trägt; dort greift schnell-check.css. tests/textseiten.test.js erzwingt den Namespace. ======================================================================== */ .seite-v2 { --rail: 1128px; } .seite-v2 .container, .seite-v2 .container--narrow { max-width: var(--rail); margin: 0 auto; padding: 0 24px; } /* Fließtext behält seine eigene, kürzere Zeilenbreite — aber innerhalb der Achse, nicht auf einer zweiten. */ .seite-v2 .ueber-body .container--narrow, .seite-v2 .lp-content .container--narrow { max-width: var(--rail); } .seite-v2 .ueber-body h2, .seite-v2 .ueber-body p, .seite-v2 .ueber-quote, .seite-v2 .ueber-services, .seite-v2 .lp-content h2, .seite-v2 .lp-content p, .seite-v2 .lp-content ul { max-width: 720px; } /* ── Kopfbereiche: ruhige weiße Fläche statt Mintverlauf ─────────────── */ .seite-v2 .ueber-hero, .seite-v2 .lp-hero, .seite-v2 .nf-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); background: var(--bg-light); } .seite-v2 .ueber-hero h1, .seite-v2 .lp-hero h1 { max-width: 820px; font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: auto; } .seite-v2 .lp-hero h1 .highlight { color: var(--secondary-color); } .seite-v2 .ueber-hero__lead, .seite-v2 .lp-hero__sub { max-width: 620px; font-size: 18px; line-height: 1.6; } .seite-v2 .lp-hero__eyebrow, .seite-v2 .ueber-hero__eyebrow { display: block; margin-bottom: 20px; padding: 0; border-radius: 0; background: none; color: var(--text-gray); font-size: 12px; letter-spacing: .18em; } .seite-v2 .ueber-hero__photo img { border-radius: var(--radius-sm); box-shadow: none; } /* ── Fließtext auf die Skala der übrigen Seiten ──────────────────────── */ .seite-v2 .ueber-body { padding: clamp(56px, 7vw, 88px) 0 clamp(80px, 9vw, 128px); } .seite-v2 .ueber-body h2, .seite-v2 .lp-content h2 { margin: clamp(48px, 6vw, 72px) 0 18px; font-family: var(--font-heading); font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .seite-v2 .ueber-body h2:first-child, .seite-v2 .lp-content h2:first-child { margin-top: 0; } .seite-v2 .ueber-body p, .seite-v2 .lp-content p { margin-bottom: 18px; font-size: 18px; line-height: 1.7; } .seite-v2 .ueber-quote { margin: clamp(32px, 4vw, 44px) 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--primary-color); font-size: clamp(19px, 2vw, 23px); font-weight: 700; } /* ── Kennzahlen und Listen: Haarlinien statt Kacheln ─────────────────── */ .seite-v2 .ueber-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); margin: clamp(40px, 5vw, 56px) 0; } .seite-v2 .ueber-fact { padding: 24px 0 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; } .seite-v2 .ueber-fact__num { margin-bottom: 8px; color: var(--text-dark); font-size: 26px; font-weight: 700; } .seite-v2 .ueber-fact__label { color: var(--text-gray); font-size: 16px; line-height: 1.5; } .seite-v2 .ueber-services { gap: 0; margin: 24px 0 8px; border-top: 1px solid var(--border-subtle); } .seite-v2 .ueber-services li { padding: 20px 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: none; } .seite-v2 .ueber-services a { margin-bottom: 5px; color: var(--text-dark); font-size: 19px; text-decoration: underline; text-decoration-color: var(--border-light); text-decoration-thickness: 1px; text-underline-offset: 5px; } .seite-v2 .ueber-services a:hover { color: var(--primary-color); text-decoration-color: var(--primary-color); } .seite-v2 .ueber-services span { font-size: 17px; } /* ── KI-Team: Rasterliste mit Haarlinien, keine Kacheln ──────────────── */ .seite-v2 .ueber-hero p.ueber-hero__meta { max-width: 620px; margin-top: -8px; margin-bottom: 24px; color: var(--text-gray); font-size: 16px; line-height: 1.6; } .seite-v2 .ueber-hero p.ueber-hero__meta a { color: var(--text-dark); text-decoration: underline; text-decoration-color: var(--border-light); text-underline-offset: 4px; } .seite-v2 .ueber-hero p.ueber-hero__meta a:hover { color: var(--primary-color); text-decoration-color: var(--primary-color); } /* Die Offenlegung, dass es sich um KI-Agenten handelt, muss sich vom Fließtext abheben — sie ist der Grund, warum die Porträts nicht als Belegschaft missverstanden werden können (docs/BILD-ASSETS-SPEC.md: keine erfundenen Personen). */ .seite-v2 .ueber-body p.ueber-hinweis { max-width: 720px; margin: clamp(24px, 3vw, 32px) 0; padding: 20px 24px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-dark); font-size: 17px; line-height: 1.6; } .seite-v2 .ueber-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 clamp(24px, 3vw, 40px); margin: clamp(32px, 4vw, 44px) 0 clamp(8px, 2vw, 16px); padding: 0; list-style: none; } .seite-v2 .ueber-team__member { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--border-subtle); } .seite-v2 .ueber-team__photo img { display: block; width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; } .seite-v2 .ueber-team__body { min-width: 0; } .seite-v2 .ueber-team__name { margin: 0 0 4px; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.2; } .seite-v2 .ueber-body p.ueber-team__role { max-width: none; margin: 0; color: var(--text-gray); font-size: 15px; line-height: 1.35; } /* ── 404: Linkliste statt Kachelraster ───────────────────────────────── */ .seite-v2 .nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 5vw, 72px); max-width: 820px; margin-inline: auto; text-align: left; } .seite-v2 .nf-link { padding: 22px 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; box-shadow: none; } .seite-v2 .nf-link:hover { transform: none; box-shadow: none; } .seite-v2 .nf-link__title { margin-bottom: 5px; font-family: var(--font-heading); font-size: 19px; font-weight: 700; } .seite-v2 .nf-link__sub { color: var(--text-gray); font-size: 16px; line-height: 1.5; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { .seite-v2 .ueber-hero__grid { grid-template-columns: 1fr; } .seite-v2 .ueber-facts { grid-template-columns: 1fr; gap: 0; } .seite-v2 .ueber-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seite-v2 .ueber-fact { padding-block: 20px; } .seite-v2 .nf-links { grid-template-columns: 1fr; } } @media (max-width: 560px) { .seite-v2 .ueber-hero, .seite-v2 .lp-hero, .seite-v2 .nf-hero { padding: 40px 0 32px; } .seite-v2 .ueber-hero h1, .seite-v2 .lp-hero h1 { font-size: clamp(28px, 8vw, 36px); } .seite-v2 .ueber-body p, .seite-v2 .lp-content p { font-size: 17px; } .seite-v2 .ueber-team { grid-template-columns: 1fr; } .seite-v2 .ueber-team__member { gap: 14px; } .seite-v2 .ueber-team__photo img { width: 60px; height: 60px; } .seite-v2 .ueber-body p.ueber-hinweis { padding: 18px 20px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .seite-v2 *, .seite-v2 *::before, .seite-v2 *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }