/* UI/CRO V4 - Service-/Landingpages (_einstieg_template.php) - 2026-09-29 Nur geladen, wenn der Bereich "Service-Seiten" im Admin (/admin/ui_v4.php) aktiv ist (body.ui-v4-service, s. index.php + de/head.php). Nur Darstellung: Breite, grosse Bildflaechen, Karten/Radien/Abstaende vereinheitlicht, lange Texte in Lesebreite. Inhalte/SEO-Texte unveraendert. Prefix body.ui-v4-service, weil das Template seine Styles inline im ausgibt. Konzept Abschnitt 13 + 14. */ body.ui-v4-service { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --content-service: 1440px; --service-wide: 1320px; --service-reading: 860px; } /* ── Breite ── */ body.ui-v4-service .page-width { width: min(var(--content-service), calc(100% - 48px)); } body.ui-v4-service.nh-home-active .container { width: min(var(--content-service), calc(100% - 48px)) !important; max-width: min(var(--content-service), calc(100% - 48px)) !important; } body.ui-v4-service .einstieg-hero, body.ui-v4-service .einstieg-hero-image, body.ui-v4-service .einstieg-section, body.ui-v4-service .einstieg-trust-bar, body.ui-v4-service .einstieg-links-grid { max-width: var(--service-wide); } /* ── Hero V4 (de/Service/_einstieg_hero_v4.php): randlos wie Kategorie-Hero, Text im Bild ── */ /* .container-content hat overflow:auto (schneidet den randlosen Hero ab) - flow-root haelt Floats ein */ body.ui-v4-service .container-content, body.ui-v4-service .einstieg-page { overflow: visible; display: flow-root; } .v4-lp-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 32vw, 500px); width: calc(100vw - var(--v4-sbw, 0px)); /* -31px: buendig an die Navigation (Abstand 15px + Rand/Innenabstand der weissen .einstieg-page 16px) */ margin: -31px 0 40px calc(50% - (100vw - var(--v4-sbw, 0px)) / 2); overflow: hidden; background: var(--navy, #062640); color: #fff; } .v4-lp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v4-lp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 38, 64, .84) 0%, rgba(6, 38, 64, .52) 42%, rgba(6, 38, 64, .05) 75%), linear-gradient(0deg, rgba(6, 38, 64, .45) 0%, rgba(6, 38, 64, 0) 45%); } .v4-lp-hero-inner { position: relative; z-index: 1; width: min(var(--content-service), calc(100% - 48px)); margin-inline: auto; padding: 48px 0 44px; } .v4-lp-crumbs { font-size: 13px; color: rgba(255, 255, 255, .8); } .v4-lp-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; } .v4-lp-crumbs a:hover { color: #fff; text-decoration: underline; } .v4-lp-crumbs [aria-current] { color: #fff; font-weight: 600; } .v4-lp-hero h1 { max-width: 820px; margin: 10px 0 12px; font-size: clamp(40px, 4.4vw, 66px); line-height: .98; letter-spacing: -.02em; color: #fff; } .v4-lp-hero-intro { max-width: 660px; margin: 0; font-size: 17px; line-height: 1.55; color: #e4edf4; } /* Buttons im Hero auch auf Seiten ohne _einstieg_template.php (Beratung, Teamshops, 404, ...) - Grundstil wie im Template, dort inline definiert. */ .v4-lp-hero .einstieg-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 24px; } .v4-lp-hero .einstieg-cta-btn { display: inline-block; padding: 14px 28px; border: 2px solid transparent; border-radius: var(--radius-sm, 8px); font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; } .v4-lp-hero .einstieg-cta-primary { background: var(--pink, #ed0b87); border-color: var(--pink, #ed0b87); color: #fff; } .v4-lp-hero .einstieg-cta-primary:hover { background: #b8005f; border-color: #b8005f; color: #fff; text-decoration: none; } .v4-lp-hero .einstieg-cta-secondary { color: #fff; border-color: #fff; background: transparent; } .v4-lp-hero .einstieg-cta-secondary:hover { background: #fff; color: var(--navy, #062640); } .v4-lp-hero .einstieg-hero-badge span { color: #fff; } /* ohne Hero-Bild: gleiche randlose Flaeche in Navy, nur niedriger (gleiche Typo/Farben wie mit Bild) */ .v4-lp-hero--plain { min-height: clamp(240px, 20vw, 300px); } .v4-lp-hero--plain::after { display: none; } @media (max-width: 680px) { .v4-lp-hero { min-height: 360px; margin-bottom: 28px; } .v4-lp-hero--plain { min-height: 200px; } .v4-lp-hero::after { background: linear-gradient(0deg, rgba(6, 38, 64, .9) 0%, rgba(6, 38, 64, .5) 60%, rgba(6, 38, 64, .15) 100%); } .v4-lp-hero-inner { width: 100%; padding: 28px 16px 24px; } .v4-lp-hero h1 { font-size: 36px; } .v4-lp-hero-intro { font-size: 15px; } .v4-lp-hero .einstieg-hero-ctas { flex-direction: column; align-items: stretch; } .v4-lp-hero .einstieg-cta-btn { width: 100%; box-sizing: border-box; } } /* ── Hero: grosse Bildflaeche (bisheriger Hero, falls V4-Hero nicht greift) ── */ body.ui-v4-service .einstieg-hero { margin-bottom: 40px; } body.ui-v4-service .einstieg-hero-image { border-radius: var(--radius-lg); margin-bottom: 28px; } body.ui-v4-service .einstieg-hero-image img { height: clamp(300px, 36vw, 500px); } body.ui-v4-service .einstieg-hero h1 { font-size: clamp(40px, 4.4vw, 60px); } body.ui-v4-service .einstieg-hero > p { font-size: 17px; max-width: 760px; margin-inline: auto; } /* ── Buttons ── */ body.ui-v4-service .einstieg-cta-btn { border-radius: var(--radius-sm); padding: 14px 28px; font-size: 15px; font-weight: 700; } /* ── Abschnitte: mehr Luft, lange Texte in Lesebreite ── */ body.ui-v4-service .einstieg-section { margin-bottom: 48px; } body.ui-v4-service .einstieg-section--soft, body.ui-v4-service .einstieg-section--shelf { padding: 44px 40px; border-radius: var(--radius-lg); } body.ui-v4-service .einstieg-section-title { font-size: clamp(30px, 2.6vw, 38px); margin-bottom: 24px; } body.ui-v4-service .einstieg-section-body { font-size: 15px; } body.ui-v4-service .einstieg-section-body > p, body.ui-v4-service .einstieg-section-body > ul, body.ui-v4-service .einstieg-section-body > ol, body.ui-v4-service .einstieg-section-body > h3 { max-width: var(--service-reading); margin-left: auto; margin-right: auto; } body.ui-v4-service .einstieg-steps-note { max-width: var(--service-reading); margin-left: auto; margin-right: auto; } /* Bild/Text-Module (lp_imgtext_css): groessere Bilder, mehr Abstand */ body.ui-v4-service .einstieg-imgtext { gap: 48px; } body.ui-v4-service .einstieg-imgtext img { border-radius: var(--radius-md); } /* ── Karten: moderat gerundet, Schatten statt Rahmen ── */ body.ui-v4-service .einstieg-step-card, body.ui-v4-service .einstieg-checklist, body.ui-v4-service .einstieg-link-card { border: 0; border-radius: var(--radius-md); background: #fff; box-shadow: 0 0 0 1px var(--line, #dfe4e8) inset; padding: 22px; } body.ui-v4-service .einstieg-link-card:hover { box-shadow: 0 0 0 2px var(--pink, #ed0b87) inset, 0 10px 24px rgba(6, 38, 64, .08); } body.ui-v4-service .einstieg-step-card h3, body.ui-v4-service .einstieg-checklist h3, body.ui-v4-service .einstieg-link-card h3 { font-size: 19px; } body.ui-v4-service .einstieg-step-card p, body.ui-v4-service .einstieg-link-card p, body.ui-v4-service .einstieg-checklist li { font-size: 14px; } body.ui-v4-service .einstieg-steps-grid, body.ui-v4-service .einstieg-links-grid, body.ui-v4-service .einstieg-checklists-grid { gap: 20px; } body.ui-v4-service .einstieg-trust-bar { border-radius: var(--radius-lg); padding: 22px 28px; } body.ui-v4-service .einstieg-table-scroll { border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line, #dfe4e8) inset; } /* ── FAQ als Karte in Lesebreite ── */ body.ui-v4-service .einstieg-faq { max-width: 900px; margin: 0 auto; padding: 8px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line, #dfe4e8) inset; } body.ui-v4-service .einstieg-faq-item:last-child { border-bottom: 0; } body.ui-v4-service .einstieg-faq-question { font-size: 15px; padding: 18px 0; } body.ui-v4-service .einstieg-faq-answer p { font-size: 14px; } /* ── Abschluss-CTA staerker gewichtet ── */ body.ui-v4-service .einstieg-cta-final { max-width: var(--service-wide); padding: 48px 32px; border-radius: var(--radius-lg); background: var(--navy, #062640); } body.ui-v4-service .einstieg-cta-final h2 { color: #fff; font-size: clamp(32px, 3vw, 42px); } body.ui-v4-service .einstieg-cta-final p { color: #d6e1ea; font-size: 15px; } body.ui-v4-service .einstieg-cta-final .einstieg-cta-secondary { color: #fff; border-color: #fff; } body.ui-v4-service .einstieg-cta-final .einstieg-cta-secondary:hover { background: #fff; color: var(--navy, #062640); } /* ── Mobil ── */ @media (max-width: 680px) { body.ui-v4-service .page-width { width: min(100% - 24px, var(--content-service)); } body.ui-v4-service.nh-home-active .container { width: min(100% - 36px, var(--content-service)) !important; max-width: min(100% - 36px, var(--content-service)) !important; } body.ui-v4-service .einstieg-hero-image img { height: 240px; } body.ui-v4-service .einstieg-section--soft, body.ui-v4-service .einstieg-section--shelf { padding: 24px 16px; border-radius: var(--radius-md); } body.ui-v4-service .einstieg-imgtext { gap: 20px; } body.ui-v4-service .einstieg-faq { padding: 4px 16px; } body.ui-v4-service .einstieg-cta-final { padding: 32px 18px; } } /* ── 404 (de/error/404.php, V4): Suche + Kategorie-Chips als Karte unter dem Hero ── */ body.ui-v4-service .v4-error .error-card { max-width: 720px; margin: 0 auto; padding: 32px; border-radius: var(--radius-lg); background: #fff; text-align: left; } .v4-error-search { display: flex; gap: 10px; margin: 0 0 24px; } .v4-error-search input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #cfd5da; border-radius: 8px; font: inherit; font-size: 15px; } .v4-error-search button { height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--pink, #ed0b87); color: #fff; font: 700 17px/1 "Barlow Condensed", Arial, sans-serif; text-transform: uppercase; cursor: pointer; } body.ui-v4-service .v4-error .error-suggestions { margin: 0; padding: 0; border: 0; } body.ui-v4-service .v4-error .error-suggestions h3 { margin: 0 0 12px; font: 700 22px/1 "Barlow Condensed", Arial, sans-serif; color: var(--navy, #062640); } body.ui-v4-service .v4-error .error-link-list { justify-content: flex-start; } body.ui-v4-service .v4-error .error-link-list a { padding: 8px 14px; border-radius: 999px; background: #f1f3f5; color: var(--navy, #062640); font-weight: 600; } body.ui-v4-service .v4-error .error-link-list a:hover { background: var(--pink, #ed0b87); color: #fff; } @media (max-width: 680px) { body.ui-v4-service .v4-error .error-card { padding: 24px 16px; border-radius: 0; } .v4-lp-hero--plain { margin-bottom: 8px; } } /* ── Formularseiten mit eigener Vorlage (Ticket-Transfer, Widerruf; .v4-formpage) ── */ body.ui-v4-service .v4-formpage { max-width: 1040px; margin: 0 auto; padding: 32px 40px; border-radius: var(--radius-lg); background: #fff; } body.ui-v4-service .pom-guide { border-radius: var(--radius-lg); } @media (max-width: 680px) { body.ui-v4-service .v4-formpage { padding: 20px 16px; border-radius: 0; } }