/* ========================================================================= Erfahre Hamburg — SSOT CSS für das Web-Modul -------------------------------------------------------------------------- Diese Datei ist die einzige Quelle für ALLE Web-Modul-Styles. Theme-Tokens (--c-bg, --c-link, ...) werden inline in vom Layout gerendert (per Tenant dynamisch). Alle anderen Styles leben hier. ========================================================================= */ /* ============ Reset + Base ============ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-text); font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: var(--c-text); } p { margin: 0; } a { color: var(--c-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; } .ef-container { max-width: var(--container); margin: 0 auto; padding: 0 22px; } @media (min-width: 768px) { .ef-container { padding: 0 32px; } } /* ============ Buttons ============ */ .ef-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); font-family: var(--font-text); font-weight: 500; font-size: 17px; letter-spacing: -0.022em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: opacity 0.2s, background 0.2s, transform 0.08s; white-space: nowrap; } .ef-btn:active { transform: scale(0.98); } .ef-btn:hover { text-decoration: none; } .ef-btn-primary { background: var(--c-link); color: #fff; } .ef-btn-primary:hover { background: #0077ed; } .ef-btn-secondary { background: transparent; color: var(--c-link); border: 1px solid var(--c-link); } .ef-btn-secondary:hover { background: var(--c-link); color: #fff; } /* .ef-btn-dark Dead-CSS geloescht 16.05.2026 — durch .ef-btn-primary ersetzt */ .ef-btn-light { background: #fff; color: var(--c-text); } .ef-btn-light:hover { background: rgba(255,255,255,0.92); } .ef-link { color: var(--c-link); font-size: 17px; font-weight: 400; letter-spacing: -0.022em; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .ef-link:hover { text-decoration: underline; } .ef-link::after { content: "›"; font-size: 1.4em; line-height: 0.7; transform: translateY(-1px); } /* ============ Header ============ */ .ef-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); height: 56px; } .ef-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; } .ef-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--c-text); } .ef-logo-img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; } .ef-logo-fallback { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--c-text); letter-spacing: -0.02em; } .ef-nav-desktop { display: none; align-items: center; gap: 32px; flex: 1; justify-content: center; } @media (min-width: 1024px) { .ef-nav-desktop { display: flex; } } .ef-nav-link { font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.85); white-space: nowrap; padding: 4px 0; letter-spacing: -0.01em; text-decoration: none; } .ef-nav-link:hover { color: var(--c-text); } .ef-nav-link.is-active { color: var(--c-text); font-weight: 500; } .ef-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ef-header-btn { display: none; } @media (min-width: 1024px) { .ef-header-btn { display: inline-flex; min-height: 36px; padding: 0 16px; font-size: 14px; } } .ef-icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--c-text); border: none; background: transparent; cursor: pointer; transition: background 0.15s; } .ef-icon-btn:hover { background: rgba(0,0,0,0.05); } .ef-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.5; } .ef-icon-phone-desktop { display: none; } @media (min-width: 1024px) { .ef-icon-phone-desktop { display: inline-flex; } } .ef-burger { display: inline-flex; } @media (min-width: 1024px) { .ef-burger { display: none; } } /* ============ Mobile Menu ============ */ .ef-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--c-bg); z-index: 60; padding: 20px 24px 40px; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.1); } .ef-mobile-menu.is-open { transform: translateX(0); } .ef-mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .ef-mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; } .ef-mobile-menu-close { margin-left: auto; margin-bottom: 16px; display: block; } .ef-mobile-menu-group { margin-bottom: 28px; } .ef-mobile-menu-group-title { font-size: 11px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; } .ef-mobile-menu-link { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-line); text-decoration: none; } .ef-mobile-menu-link.small { font-family: var(--font-text); font-size: 16px; font-weight: 400; } .ef-mobile-menu-link svg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; } /* ============ Mobile CTA Bar ============ */ .ef-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--c-line); z-index: 30; display: flex; padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 1024px) { .ef-cta-bar { display: none; } } .ef-cta-slot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; color: var(--c-text); font-size: 11px; font-weight: 500; text-decoration: none; min-height: 58px; } .ef-cta-slot svg { width: 22px; height: 22px; stroke-width: 1.6; } .ef-cta-slot.is-active { color: var(--c-link); } @media (max-width: 1023px) { body { padding-bottom: 70px; } } /* ============ Footer ============ */ .ef-footer { background: var(--c-bg-alt); padding: 56px 0 28px; margin-top: 96px; font-size: 12px; color: var(--c-muted); line-height: 1.6; } .ef-footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; } @media (min-width: 768px) { .ef-footer-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } } .ef-footer-col h4 { font-family: var(--font-text); font-weight: 600; font-size: 12px; color: var(--c-text); margin: 0 0 12px; line-height: 1.4; } .ef-footer-col p, .ef-footer-col a { color: var(--c-muted); text-decoration: none; display: block; } .ef-footer-col a:hover { color: var(--c-text); text-decoration: underline; } .ef-footer-bottom { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--c-line); } @media (min-width: 768px) { .ef-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } } /* Dezenter Grounding-Link in der Footer-Bottom-Zeile. * Bewusst unauffaellig: gleiche Farbe wie Copyright, kein Underline, * Hover deckt erst dann auf, dass es ein Link ist. Bernds Vorgabe: * "nicht so offensichtlich" — fuer AI-Crawler-Auffindbarkeit reicht das. */ .ef-footer-subtle-sep { margin: 0 6px; opacity: 0.5; } .ef-footer-subtle-link { color: inherit; text-decoration: none; opacity: 0.8; } .ef-footer-subtle-link:hover { text-decoration: underline; opacity: 1; } .ef-social { display: flex; gap: 12px; } .ef-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); } .ef-social a:hover { color: var(--c-text); } .ef-social svg { width: 14px; height: 14px; } /* ========================================================================= Apple-Section System — wiederverwendbare Sektionen über alle Seiten ========================================================================= */ .ap-section { padding: 88px 22px; } @media (min-width: 768px) { .ap-section { padding: 120px 32px; } } @media (min-width: 1024px) { .ap-section { padding: 132px 32px; } } .ap-section.alt { background: var(--c-bg-alt); } .ap-section.dark { background: #1d1d1f; color: #f5f5f7; } .ap-section.dark h1, .ap-section.dark h2, .ap-section.dark h3, .ap-section.dark h4 { color: #fff; } .ap-section.dark .ap-eyebrow { color: #86868b; } .ap-inner { max-width: var(--container); margin: 0 auto; } .ap-center { text-align: center; } .ap-eyebrow { font-family: var(--font-text); font-size: 17px; font-weight: 600; color: var(--c-link); letter-spacing: -0.022em; margin: 0 0 8px; } .ap-h1 { font-family: var(--font-display); font-size: clamp(40px, 7.5vw, 80px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: var(--c-text); margin: 0; } .ap-h2 { font-family: var(--font-display); font-size: clamp(34px, 5.5vw, 56px); line-height: 1.07; letter-spacing: -0.03em; font-weight: 700; color: var(--c-text); margin: 0; } .ap-h3 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 700; color: var(--c-text); margin: 0; } .ap-sub { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 400; color: var(--c-text); margin: 12px 0 0; } .ap-section.dark .ap-sub { color: #f5f5f7; } .ap-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--c-muted); margin: 16px auto 0; max-width: 720px; } .ap-ctas { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 24px; } .ap-ctas.center { justify-content: center; } /* ============ Hero ============ */ .ap-hero { padding: 56px 22px 0; background: var(--c-bg); text-align: center; } @media (min-width: 768px) { .ap-hero { padding: 80px 32px 0; } } .ap-hero-inner { max-width: var(--container); margin: 0 auto; } .ap-hero .ap-ctas { justify-content: center; } .ap-hero-image { margin: 48px auto 0; max-width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-card); } @media (min-width: 768px) { .ap-hero-image { aspect-ratio: 16/9; margin-top: 64px; } } @media (min-width: 1024px) { .ap-hero-image { aspect-ratio: 21/9; margin-top: 80px; } } .ap-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ============ Welten-Grid (4-Cards-Layout) ============ */ .ap-welten { padding: 96px 22px 0; } @media (min-width: 768px) { .ap-welten { padding: 96px 32px 0; } } .ap-welten-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; } .ap-welten-grid { max-width: var(--container); margin: 0 auto; display: grid; gap: 12px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 768px) { .ap-welten-grid { grid-template-columns: 1fr 1fr; gap: 16px; } } .ap-welt { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--c-bg-alt); min-height: 580px; height: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .ap-welt.dark { background: #1d1d1f; color: #f5f5f7; } .ap-welt-content { padding: 56px 32px 0; text-align: center; flex: 0 0 auto; } .ap-welt-eyebrow { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; margin: 0 0 6px; color: var(--c-muted); } .ap-welt.dark .ap-welt-eyebrow { color: #a1a1a6; } .ap-welt-title { font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; margin: 0; } .ap-welt.dark .ap-welt-title { color: #fff; } .ap-welt-sub { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; margin: 8px 0 0; color: var(--c-text); } .ap-welt.dark .ap-welt-sub { color: #f5f5f7; } .ap-welt-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 16px; align-items: center; flex-direction: column; } .ap-welt-image { margin-top: auto; width: 100%; height: 280px; overflow: hidden; flex: 0 0 280px; } .ap-welt-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); display: block; } /* ============ Service-Cards (Werkstatt + Leasing) ============ */ .ap-services-grid { max-width: var(--container); margin: 16px auto 0; display: grid; gap: 12px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 768px) { .ap-services-grid { grid-template-columns: 1fr 1fr; gap: 16px; } } .ap-service { background: var(--c-bg-alt); border-radius: var(--radius-card); padding: 48px 32px; min-height: 380px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; text-decoration: none; color: inherit; } .ap-service.dark { background: #1d1d1f; color: #f5f5f7; } .ap-service .ap-welt-title { color: var(--c-text); } .ap-service.dark .ap-welt-title { color: #fff; } .ap-service .ap-welt-sub { color: var(--c-text); } .ap-service.dark .ap-welt-sub { color: #f5f5f7; } .ap-service .ap-welt-ctas { margin-top: auto; padding-top: 24px; width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; flex-wrap: nowrap; } .ap-service .ef-btn { width: auto; display: inline-flex; min-height: 48px; } /* ============ Stats Strip ============ */ .ap-stats { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); text-align: center; } @media (min-width: 768px) { .ap-stats { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .ap-stat-num { font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--c-link); margin: 0; } .ap-stat-label { font-size: 14px; color: var(--c-muted); letter-spacing: -0.01em; margin: 12px 0 0; line-height: 1.4; } /* ============ News-Magazin-Grid ============ */ .ap-news-grid { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 12px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 768px) { .ap-news-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } .ap-news-item { background: var(--c-bg); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .ap-section.alt .ap-news-item { background: #fff; } .ap-news-item.featured { grid-column: 1 / -1; } @media (min-width: 768px) { .ap-news-item.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; } .ap-news-item.featured .ap-news-img { aspect-ratio: auto; height: 100%; } } .ap-news-img { aspect-ratio: 16/9; background: var(--c-bg-alt); overflow: hidden; } .ap-news-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); } .ap-news-body { padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; } @media (min-width: 768px) { .ap-news-body { padding: 40px 36px; } } .ap-news-date { font-size: 13px; color: var(--c-muted); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; } .ap-news-title { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 12px; color: var(--c-text); } .ap-news-teaser { font-size: 16px; line-height: 1.4; color: var(--c-muted); margin: 0 0 16px; max-width: 460px; } /* ============ Newsletter ============ */ .ap-newsletter { max-width: 720px; margin: 0 auto; text-align: center; } .ap-newsletter-form { margin-top: 28px; display: flex; gap: 12px; max-width: 480px; margin-left: auto; margin-right: auto; flex-wrap: wrap; justify-content: center; } .ap-newsletter-input { flex: 1; min-width: 220px; min-height: 48px; padding: 0 22px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-family: var(--font-text); font-size: 17px; letter-spacing: -0.022em; background: #fff; color: var(--c-text); box-sizing: border-box; } .ap-newsletter-input:focus { outline: 2px solid var(--c-link); outline-offset: 2px; border-color: var(--c-link); } /* Newsletter-Hint nach Form-Submit (SSOT, ersetzt main.js style.cssText) */ .ef-newsletter-hint { margin-top: 16px; color: var(--c-muted); font-size: 14px; } /* ========================================================================= Welt-Detail-Hero (Performance, Cargo, etc.) -------------------------------------------------------------------------- Apple-Pattern: Text-Panel + edge-to-edge Bild. Auf dunklem Hintergrund blendet das Bild via Gradient sauber in den schwarzen Text-Bereich ueber, so wirkt nichts "abgeschnitten und lost". ========================================================================= */ .ap-welt-hero { padding: 72px 22px 0; background: var(--c-bg); text-align: center; position: relative; } @media (min-width: 768px) { .ap-welt-hero { padding: 96px 32px 0; } } .ap-welt-hero.dark { background: #1d1d1f; color: #f5f5f7; } .ap-welt-hero.dark, .ap-welt-hero.dark p, .ap-welt-hero.dark .ap-eyebrow, .ap-welt-hero.dark .ap-sub { color: #f5f5f7 !important; } .ap-welt-hero.dark .ap-h1, .ap-welt-hero.dark h1 { color: #ffffff !important; } .ap-welt-hero.dark .ap-eyebrow { color: #5ea6ff !important; } .ap-welt-hero-inner { max-width: 880px; margin: 0 auto; padding: 0 0 56px; } @media (min-width: 768px) { .ap-welt-hero-inner { padding: 0 0 72px; } } /* Bild full-bleed edge-to-edge: kein max-width, kein border-radius, kein Outer-Padding. Macht das "Card-in-Raum"-Gefuehl auf dunklem Hintergrund weg. */ .ap-welt-hero-image { margin: 0 -22px; aspect-ratio: 16/9; overflow: hidden; position: relative; } @media (min-width: 768px) { .ap-welt-hero-image { margin: 0 -32px; aspect-ratio: 21/9; } } .ap-welt-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); } /* Bernd 16.05.2026: kein Gradient mehr — harter Schnitt vom dunklen Text-Panel direkt zum Bild. */ /* ============ Welt-Profil-Sektion ("Für wen ist das?") ============ */ .ap-target-grid { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 768px) { .ap-target-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } .ap-target-card { padding: 32px 28px; background: var(--c-bg); border-radius: var(--radius-card); border: 1px solid var(--c-line); } .ap-section.alt .ap-target-card { background: #fff; } .ap-target-card h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 12px; letter-spacing: -0.025em; } .ap-target-card p { color: var(--c-muted); font-size: 16px; line-height: 1.5; } /* ============ Steps (Beratung -> Probefahrt -> Abholung) ============ */ .ap-steps { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 32px; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 768px) { .ap-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .ap-step { text-align: center; counter-increment: step; } .ap-step::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-link); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 16px; } .ap-step h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; letter-spacing: -0.022em; } .ap-step p { color: var(--c-muted); font-size: 16px; line-height: 1.5; } /* ============ Marken-Logo-Wand ============ */ .ap-brands { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); align-items: center; } @media (min-width: 640px) { .ap-brands { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .ap-brands { grid-template-columns: repeat(5, 1fr); } } .ap-brand-tile { padding: 24px 16px; text-align: center; color: var(--c-text); font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.022em; text-decoration: none; background: var(--c-bg); border-radius: 12px; border: 1px solid var(--c-line); transition: transform 0.15s, border-color 0.15s; display: flex; align-items: center; justify-content: center; min-height: 72px; } .ap-section.alt .ap-brand-tile { background: #fff; } .ap-brand-tile:hover { transform: translateY(-2px); border-color: var(--c-link); text-decoration: none; } /* Logo-Variante: wird auf maximal die Tile-Hoehe skaliert, Aspect-Ratio bleibt erhalten via object-fit:contain. */ .ap-brand-tile img { max-height: 40px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } .ap-brand-tile--large { min-height: 100px; padding: 28px 20px; } .ap-brand-tile--large img { max-height: 56px; } /* Wordmark-Fallback: Marken-Name elegant typografisch wenn kein Logo upload da */ /* ============ Horizontal-Content-Karussell (Apple-Style) ==================== * SSOT-Element fuer Werkstatt-Leistungen + ggf. Marken-Bloecke pro Welt. * Mobile 1 Card sichtbar + ~15% Peek von rechts, Tablet 2, Desktop 3, XL 4. * scroll-snap-x mandatory, smooth. * Klassen-Prefix: ap-hcarousel-* (h = horizontal content; KEIN Konflikt * mit dem bestehenden .ap-carousel-* das fuer Stage-Bilder ist). * ============================================================================ */ .ap-hcarousel { position: relative; width: 100%; } .ap-hcarousel-track { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; /* Symmetrischer Peek beidseitig: Card centered, links + rechts ~7vw der Nachbar-Cards sichtbar (Apple-Pattern). */ padding-inline: 7vw; padding-block: 8px 24px; } .ap-hcarousel-track::-webkit-scrollbar { display: none; } .ap-hcarousel-track:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 4px; border-radius: 16px; } @media (prefers-reduced-motion: reduce) { .ap-hcarousel-track { scroll-behavior: auto; } } @media (min-width: 720px) { .ap-hcarousel-track { gap: 20px; padding-inline: 5vw; padding-block: 12px 28px; } } @media (min-width: 1080px) { .ap-hcarousel-track { gap: 24px; padding-inline: max(40px, calc((100% - var(--container, 1200px)) / 2 + 16px)); padding-block: 16px 32px; } } .ap-hcarousel-card { flex: 0 0 78vw; /* Mobile: ~11vw Peek beidseitig sichtbar */ max-width: 380px; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line, rgba(0,0,0,0.08)); border-radius: 22px; padding: 28px 24px; transition: border-color .2s ease; } .ap-hcarousel-card.is-highlight { border-color: var(--c-link); } .ap-hcarousel-card:hover { border-color: rgba(0,0,0,0.15); } @media (min-width: 720px) { .ap-hcarousel-card { flex: 0 0 44%; } } @media (min-width: 1080px) { .ap-hcarousel-card { flex: 0 0 30%; max-width: 420px; padding: 32px 28px; } } @media (min-width: 1440px) { .ap-hcarousel-card { flex: 0 0 22%; } } /* Bild oben in Modell-Karten (Marken-Detail-Seiten). */ .ap-hcarousel-card-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg, #fff); border-radius: 14px; margin-bottom: 16px; } .ap-section.alt .ap-hcarousel-card-media { background: var(--c-bg-alt, #f5f5f7); } .ap-hcarousel-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap-hcarousel-card-media--empty { background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: 13px; min-height: 160px; } .ap-hcarousel-card-eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); margin: 0; } .ap-hcarousel-card.is-highlight .ap-hcarousel-card-eyebrow { color: var(--c-link); } .ap-hcarousel-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--c-text); margin: 8px 0 0; } .ap-hcarousel-card-desc { font-size: 14.5px; line-height: 1.55; color: var(--c-text); margin: 14px 0 0; } .ap-hcarousel-card-bullets { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; } .ap-hcarousel-card-bullets li { font-size: 13.5px; line-height: 1.45; color: var(--c-muted); padding-left: 18px; position: relative; } .ap-hcarousel-card-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-text); opacity: 0.4; } /* Preis-Details: kleine Auflistung von Preis-Tiers (z.B. Wartung * Fahrrad/E-Bike/Lastenrad). Wird zusammen mit Preis-Block ans Card-Ende * gepinnt (Bernd 16.05.2026). */ .ap-hcarousel-card-price-details { list-style: none; margin: 18px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--c-muted); } .ap-hcarousel-card-price-details li { padding-left: 14px; position: relative; } .ap-hcarousel-card-price-details li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-muted); opacity: 0.6; } /* Preis-Block ans Card-Ende pinnen (alle Cards gleich hoch) */ .ap-hcarousel-card-price { margin: auto 0 0; padding-top: 18px; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--c-text); } .ap-hcarousel-card-price-details + .ap-hcarousel-card-price, .ap-hcarousel-card-price-details ~ .ap-hcarousel-card-price { margin-top: 0; padding-top: 6px; } .ap-hcarousel-card-price-details { margin-top: auto; } .ap-hcarousel-card-price-sub { margin: 4px 0 0; font-size: 13px; color: var(--c-muted); } .ap-hcarousel-card-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-line, rgba(0,0,0,0.08)); font-size: 13px; line-height: 1.45; color: var(--c-muted); /* Bernd 16.05.2026: alle Cards bekommen exakt gleichen Footer- Trennstrich + min. 3 Textzeilen Hoehe. Damit liegt der border-top in allen Cards auf gleicher visueller Hoehe und der Footer-Block ist konsistent gross. */ min-height: calc(14px + (1.45em * 3)); } /* Falls Card sowohl Dialogannahme- als auch Extra-Note-Footer hat (Garantie/Reklamation): zweiter Footer ohne erneuten Trennstrich + ohne min-height (wir wollen den Block nicht ueberhoeht), und ohne margin-top (sitzt direkt unter dem ersten Footer). */ .ap-hcarousel-card-foot + .ap-hcarousel-card-foot { margin-top: 8px; padding-top: 0; border-top: 0; min-height: 0; } .ap-hcarousel-card-foot strong { color: var(--c-text); font-weight: 600; } /* Wenn eine bestehende .ap-brand-card im Karussell-Track liegt, bekommt * sie Karussell-Eigenschaften (Flex-Width + scroll-snap-align). Damit * konnen die 4 Welt-Markenbloecke (alltag/cargo/performance/kids) ohne * Markup-Duplizierung in das Karussell wandern. */ .ap-hcarousel-track > .ap-brand-card { flex: 0 0 78vw; /* Mobile: ~11vw Peek beidseitig sichtbar */ max-width: 380px; scroll-snap-align: center; scroll-snap-stop: always; } @media (min-width: 720px) { .ap-hcarousel-track > .ap-brand-card { flex: 0 0 44%; } } @media (min-width: 1080px) { .ap-hcarousel-track > .ap-brand-card { flex: 0 0 30%; max-width: 420px; } } @media (min-width: 1440px) { .ap-hcarousel-track > .ap-brand-card { flex: 0 0 22%; } } /* Pfeil-Navigation unter dem Track (klein, subtil, Apple-Style). * JS-Hook: public/js/web/main.js bindet [data-ef-hcarousel-prev/-next] * an scrollBy() des zugehoerigen Tracks. */ .ap-hcarousel-nav { display: flex; justify-content: center; gap: 10px; margin-top: 4px; padding-bottom: 8px; } .ap-hcarousel-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.06); color: var(--c-text); cursor: pointer; transition: background .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; } .ap-hcarousel-nav-btn:hover { background: rgba(0, 0, 0, 0.1); } .ap-hcarousel-nav-btn:active { transform: scale(0.94); } .ap-hcarousel-nav-btn:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 2px; } .ap-hcarousel-nav-btn svg { width: 16px; height: 16px; } .ap-hcarousel-nav-btn[disabled] { opacity: 0.35; cursor: default; } /* ============ Brand-Card (groesser, mit Beschreibung + Tags + Pfeil) ============ */ /* .ap-brand-cards Grid-Container geloescht 16.05.2026 — Werkstatt-Qualifikationen * + Welt-Marken sind jetzt Karussell-basiert (.ap-hcarousel-track > .ap-brand-card). */ .ap-brand-card { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 16px; transition: border-color .2s ease, transform .2s ease; } .ap-section.alt .ap-brand-card { background: var(--c-bg, #fafafa); } .ap-brand-card:hover { border-color: var(--c-link); transform: translateY(-2px); } .ap-brand-card-logo { display: flex; align-items: center; justify-content: flex-start; height: 56px; text-decoration: none; color: inherit; } .ap-brand-card-logo img { max-height: 44px; max-width: 160px; width: auto; height: auto; object-fit: contain; } .ap-brand-card-wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); } .ap-brand-card-body { display: flex; flex-direction: column; gap: 10px; } /* Bernd 16.05.2026: hidden-Attribut muss innerhalb flex-Container explizit forciert werden, sonst rendert Browser das H3-Fallback trotzdem mit. */ .ap-brand-card-body [hidden] { display: none !important; } .ap-brand-card-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0; color: var(--c-text); } .ap-brand-card-desc { font-size: 14.5px; line-height: 1.55; color: var(--c-text); margin: 0; } .ap-brand-card-tags { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .ap-brand-card-tags li { font-size: 12px; line-height: 1.2; padding: 5px 10px; background: rgba(0,0,0,0.04); border-radius: 999px; color: var(--c-muted); } .ap-section.alt .ap-brand-card-tags li { background: rgba(0,0,0,0.05); } .ap-brand-card-link { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--c-link); text-decoration: none; transition: gap .2s ease; display: inline-flex; align-items: center; gap: 6px; } .ap-brand-card-link:hover { gap: 10px; text-decoration: underline; } .ap-brand-tile-wordmark { display: block; line-height: 1.2; } /* ============ Qualifikations-Karte (Karussell-Variante: Bild oben, Text drunter, rahmenlos) * Apple-Style: schmalere Cards damit Mobile fast 2 sichtbar sind (Peek beidseitig). * Genutzt fuer Werkstatt-Qualifikationen (Shimano / VSF / Rose / Standert) * im Karussell-Track (.ap-hcarousel-track > .ap-qcard). * Pattern auch wiederverwendbar fuer aehnliche Logo+Text-Listen. */ .ap-hcarousel-track > .ap-qcard { flex: 0 0 52vw; /* Mobile: ~2 Cards sichtbar mit Peek */ max-width: 280px; scroll-snap-align: center; scroll-snap-stop: always; } @media (min-width: 720px) { .ap-hcarousel-track > .ap-qcard { flex: 0 0 32%; max-width: 280px; } } @media (min-width: 1080px) { .ap-hcarousel-track > .ap-qcard { flex: 0 0 23%; max-width: 300px; } } @media (min-width: 1440px) { .ap-hcarousel-track > .ap-qcard { flex: 0 0 18%; } } .ap-qcard { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; transition: transform .2s ease; } .ap-qcard:hover { transform: translateY(-2px); } .ap-qcard-media { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; /* clip via border-radius (Apple-Pattern) */ background: #fff; border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .ap-section.alt .ap-qcard-media { background: var(--c-bg, #fafafa); } .ap-qcard-media img { width: 100%; height: 100%; object-fit: cover; /* Logo fuellt die Card; Ecken durch border-radius beschnitten */ object-position: center; display: block; } .ap-qcard-media--empty { /* Edit-Mode: leerer Slot bleibt klickbar fuer Upload, aber unauffaellig */ min-height: 100px; background: rgba(0,0,0,0.03); box-shadow: none; } .ap-qcard-body { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; width: 100%; } .ap-qcard-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0; color: var(--c-text); letter-spacing: -0.005em; } .ap-qcard-desc { font-size: 13px; line-height: 1.5; color: var(--c-muted); margin: 0; } @media (min-width: 720px) { .ap-qcard-name { font-size: 17px; } .ap-qcard-desc { font-size: 13.5px; } } /* ============ FAQ-Accordion ============ */ .ap-faq { max-width: 800px; margin: 48px auto 0; } .ap-faq-item { border-bottom: 1px solid var(--c-line); } .ap-faq-q { width: 100%; text-align: left; background: transparent; border: none; padding: 20px 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--c-text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; letter-spacing: -0.022em; } .ap-faq-q::after { content: "+"; font-size: 26px; font-weight: 400; color: var(--c-muted); transition: transform 0.2s; flex-shrink: 0; } .ap-faq-item.is-open .ap-faq-q::after { transform: rotate(45deg); } .ap-faq-a { padding: 0 0 24px; color: var(--c-muted); font-size: 16px; line-height: 1.55; display: none; } .ap-faq-item.is-open .ap-faq-a { display: block; } /* ============ Kontakt-Block (NAP-Section) ============ */ .ap-contact { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 768px) { .ap-contact { grid-template-columns: 1fr 1fr; gap: 64px; } } .ap-contact-block h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 16px; letter-spacing: -0.025em; } .ap-contact-block p, .ap-contact-block a { font-size: 17px; color: var(--c-text); line-height: 1.6; margin: 0 0 4px; display: block; } .ap-contact-block a { color: var(--c-link); } .ap-map { aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; background: var(--c-bg-alt); } .ap-map iframe { width: 100%; height: 100%; border: 0; display: block; } /* ========================================================================= Edit-Mode-Overlay (nur sichtbar wenn body[data-edit-mode]) ========================================================================= */ [data-ef-slot] { position: relative; } a[data-ef-disabled] { text-decoration: none !important; cursor: default !important; } a[data-ef-disabled] * { text-decoration: none !important; } [data-ef-slot] .ef-edit-badge { position: absolute; top: 12px; right: 12px; z-index: 40; background: rgba(0,0,0,0.85); color: #fff; font-size: 12px; font-weight: 600; font-family: var(--font-text); padding: 8px 14px; border-radius: 999px; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; transition: opacity 0.15s, transform 0.1s; } [data-ef-slot] .ef-edit-badge:hover { opacity: 1; transform: scale(1.04); } [data-ef-slot] .ef-edit-badge svg { width: 14px; height: 14px; } [data-ef-slot] input[type=file] { display: none; } [data-ef-slot].is-uploading::after { content: "Wird hochgeladen..."; position: absolute; inset: 0; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; z-index: 35; font-family: var(--font-text); font-size: 16px; font-weight: 600; color: #1d1d1f; border-radius: inherit; } /* Focal-Point-Marker (klick auf Bild im Edit-Mode setzt Bildmittelpunkt) */ .ef-focal-marker { position: absolute; z-index: 45; width: 22px; height: 22px; max-width: 22px; max-height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); border: 2px solid var(--c-link, #1f6da8); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.2s; opacity: 0.7; } .ef-focal-marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c-link, #1f6da8); } .ef-focal-hint { position: absolute; bottom: 8px; left: 8px; z-index: 40; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 500; font-family: var(--font-text); pointer-events: none; /* Default: unsichtbar. Nur wenn der Slot/das Bild gehovered wird, erscheint der Hint. Sichert die Bild-Praesentation im Edit-Mode. */ opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; letter-spacing: -0.01em; max-width: calc(100% - 16px); } [data-ef-slot]:hover .ef-focal-hint, [data-ef-slot]:focus-within .ef-focal-hint { opacity: 0.92; transform: translateY(0); } /* ============ Edit-Banner ============ */ .ef-edit-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #ff9500; color: #fff; padding: 8px 16px; font-size: 13px; font-weight: 600; text-align: center; font-family: var(--font-text); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: center; gap: 16px; } .ef-edit-banner a { color: #fff; text-decoration: underline; } .ef-edit-banner button.ef-edit-banner-btn { background: rgba(0,0,0,0.25); color: #fff; border: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; } .ef-edit-banner button.ef-edit-banner-btn:hover { background: rgba(0,0,0,0.4); } .ef-edit-banner button.ef-edit-banner-btn--danger { background: #c8341c; } .ef-edit-banner button.ef-edit-banner-btn--danger:hover { background: #a82610; } .ef-edit-banner-label { display: inline-flex; align-items: center; gap: 4px; } .ef-edit-banner-role { opacity: 0.8; font-weight: 400; font-size: 11px; } .ef-edit-banner form { margin: 0; padding: 0; } /* Edit-Overlay temporaer ausblenden (Frontend-Toggle, keine Session-Aenderung) */ body.is-edit-mode.is-edit-overlay-hidden .ef-edit-badge, body.is-edit-mode.is-edit-overlay-hidden .ef-focal-marker, body.is-edit-mode.is-edit-overlay-hidden .ef-focal-hint, body.is-edit-mode.is-edit-overlay-hidden .ap-model-image-empty { display: none !important; } body.is-edit-mode { padding-top: 38px; } body.is-edit-mode .ef-header { top: 38px; } @media (max-width: 767px) { .ef-edit-banner { flex-wrap: wrap; padding: 6px 12px; gap: 8px; font-size: 11px; } body.is-edit-mode { padding-top: 64px; } body.is-edit-mode .ef-header { top: 64px; } } /* ============ Debug-Panel ============ */ .ef-debug { position: fixed; bottom: 80px; right: 12px; z-index: 200; width: 380px; max-width: calc(100vw - 24px); max-height: 60vh; background: rgba(20,20,22,0.96); color: #e3e3e8; border-radius: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.4; box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden; display: flex; flex-direction: column; backdrop-filter: blur(12px); } .ef-debug.is-collapsed { max-height: 38px; } .ef-debug-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 600; cursor: pointer; user-select: none; } .ef-debug-head .title { flex: 1; } .ef-debug-head .count { background: #ff3b30; color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 10px; } .ef-debug-head .count.warn { background: #ff9500; } .ef-debug-head .count.ok { background: #34c759; } .ef-debug-head button { background: rgba(255,255,255,0.08); color: #fff; border: none; padding: 3px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 10px; } .ef-debug-head button:hover { background: rgba(255,255,255,0.16); } .ef-debug-body { flex: 1; overflow-y: auto; padding: 4px 0; } .ef-debug-row { padding: 4px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); word-break: break-all; } .ef-debug-row .ts { color: #86868b; } .ef-debug-row .lvl { display: inline-block; padding: 0 5px; border-radius: 3px; font-weight: 700; font-size: 10px; margin: 0 4px 0 6px; } .ef-debug-row .lvl.info { background: #007aff; color: #fff; } .ef-debug-row .lvl.warn { background: #ff9500; color: #fff; } .ef-debug-row .lvl.error { background: #ff3b30; color: #fff; } .ef-debug-row .lvl.fetch { background: #5856d6; color: #fff; } .ef-debug-row .lvl.ok { background: #34c759; color: #fff; } .ef-debug-row pre { margin: 4px 0 0; padding: 4px 8px; background: rgba(0,0,0,0.4); border-radius: 4px; font-size: 10px; white-space: pre-wrap; word-break: break-all; } .ef-debug-empty { padding: 16px; text-align: center; color: #86868b; font-size: 11px; } /* ============================================================================ ModelStage — Basis-Styles (Bento-Layout ist weiter unten) ---------------------------------------------------------------------------- Hier nur: Section-Intro, Stage-Theme (dark/light), Eyebrow, CTA-Button, Edit-Mode-Placeholder, Scroll-Reveal-Klasse. Pin-System / Crossfade-Frames sind nach Bento-Refactor entfernt (Audit-Cleanup 14.05.2026). ========================================================================== */ .ap-section-intro { padding: 80px 24px 24px; background: var(--c-bg); } @media (min-width: 768px) { .ap-section-intro { padding: 120px 32px 40px; } } .ap-model-stages { /* Container fuer alle Stages */ } .ap-model-stage--dark { background: #0a0a0a; color: #f5f5f7; } .ap-model-stage--light { background: #f5f5f7; color: #1d1d1f; } .ap-model-eyebrow { margin: 0; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; } .ap-model-stage--dark .ap-model-eyebrow { color: #5ea6ff; } .ap-model-stage--light .ap-model-eyebrow { color: var(--c-link); } .ap-model-cta { margin-top: 8px; } /* Edit-Mode-Placeholder wenn kein Bild im Slot */ .ap-model-image-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1.5px dashed rgba(255, 255, 255, 0.18); border-radius: 24px; padding: 32px; text-align: center; pointer-events: none; } .ap-model-stage--light .ap-model-image-empty { border-color: rgba(0, 0, 0, 0.12); } .ap-model-image-empty svg { opacity: 0.45; } .ap-model-image-empty p { margin: 0; font-size: 15px; font-weight: 500; opacity: 0.75; } .ap-model-image-empty-hint { font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.45 !important; } /* ============================================================================ Accessibility — Skip-Link + Focus-States (Audit 14.05.2026) ============================================================================ */ /* Skip-Link: nur sichtbar bei Tastatur-Fokus, sonst off-screen */ .ef-skip-link { position: absolute; top: -100px; left: 12px; z-index: 200; padding: 12px 18px; background: #0a0a0a; color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; transition: top 0.18s ease; } .ef-skip-link:focus, .ef-skip-link:focus-visible { top: 12px; outline: 2px solid #5ea6ff; outline-offset: 2px; } /* Focus-States fuer alle interaktiven Elemente (WCAG 2.2 AA) */ .ef-btn:focus-visible, .ef-nav-link:focus-visible, .ef-icon-btn:focus-visible, .ef-logo:focus-visible, .ef-mobile-menu-link:focus-visible, .ef-link:focus-visible, .ap-faq-q:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 3px; border-radius: 6px; } /* Main-Content soll bei Tastatur-Skip nicht visuell auffallen */ main:focus { outline: none; } /* ============================================================================ Apple-Style Karussell (ersetzt das Bento-Layout) ---------------------------------------------------------------------------- - Pro Stage 1-3 Slides, snap-x carousel mit weissen Karten auf hellem Background (#f5f5f7 / .ap-model-stage--light). - Dots + Auto-Play-Button unter dem Karussell. - Edit-Mode: alle 3 Slots immer als Slides sichtbar. - Mobile-first: native scroll-snap, kein JS noetig fuer Touch. ========================================================================== */ /* Stage als helle Section, kein dark mehr — Apple-Style */ .ap-model-stage--light { background: #f5f5f7; color: #1d1d1f; padding: 80px 0; } @media (min-width: 768px) { .ap-model-stage--light { padding: 120px 0; } } @media (min-width: 1024px) { .ap-model-stage--light { padding: 160px 0; } } .ap-model-stage--light .ap-model-stage-inner { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; align-items: center; text-align: center; } .ap-model-stage--light .ap-model-text--compact { padding: 0 24px; } /* Carousel-Container */ .ap-carousel { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; } .ap-carousel-track { display: flex; flex-direction: row; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 16px; padding: 8px 12vw 8px 12vw; scrollbar-width: none; } .ap-carousel-track::-webkit-scrollbar { display: none; } .ap-carousel-track:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 4px; border-radius: 12px; } @media (min-width: 768px) { .ap-carousel-track { padding: 12px 15vw; gap: 24px; } } @media (min-width: 1024px) { .ap-carousel-track { padding: 16px calc(50% - 360px); } } .ap-carousel-slide { flex: 0 0 76vw; max-width: 720px; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 768px) { .ap-carousel-slide { flex: 0 0 70vw; } } @media (min-width: 1024px) { .ap-carousel-slide { flex: 0 0 720px; } } .ap-carousel-card { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 28px; /* KEIN Box-Shadow + KEIN Drop-Shadow auf Bildern — die Bilder liegen direkt auf hellem Background, sollen aussehen wie Apple-Compare-Karten ohne Doppel-Background-Effekt. */ overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; } @media (min-width: 768px) { .ap-carousel-card { padding: 40px; border-radius: 32px; } } .ap-carousel-card .ap-carousel-image, .ap-carousel-card .ap-carousel-image > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .ap-carousel-card .ap-carousel-image img { width: 100%; height: 100%; object-fit: contain; /* KEIN drop-shadow — Bild soll nahtlos auf der Karte sitzen */ } .ap-carousel-caption { margin: 0; font-size: 13px; font-weight: 500; color: #6e6e73; letter-spacing: 0.2px; text-align: center; } /* Dots + Play-Button im Apple-Pill-Style */ .ap-carousel-controls { display: flex; align-items: center; gap: 12px; padding: 0 24px; } .ap-carousel-dots { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(0, 0, 0, 0.06); border-radius: 999px; } .ap-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.28); border: none; padding: 0; cursor: pointer; transition: all 280ms cubic-bezier(0.2, 0.6, 0.2, 1); } .ap-carousel-dot:hover { background: rgba(0, 0, 0, 0.45); } .ap-carousel-dot.is-active { background: #1d1d1f; width: 22px; border-radius: 4px; } .ap-carousel-dot:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 3px; } .ap-carousel-play { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #1d1d1f; transition: background 200ms; } .ap-carousel-play:hover { background: rgba(0, 0, 0, 0.12); } .ap-carousel-play.is-playing { background: #1d1d1f; color: #fff; } .ap-carousel-play.is-playing svg path { d: path("M6 5h4v14H6zm8 0h4v14h-4z"); } .ap-carousel-play:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 3px; } /* Placeholder-Variante: gleiche Carousel-Karte, aber dashed border statt Bild */ .ap-model-stage--placeholder .ap-carousel-card { background: #fafafa; box-shadow: none; border: 1.5px dashed rgba(0, 0, 0, 0.14); } /* Mobile: kleinere padding + radius */ @media (max-width: 767px) { .ap-carousel-track { padding: 8px 24px; scroll-padding-inline: 24px; } .ap-carousel-slide { flex: 0 0 calc(100vw - 64px); } .ap-carousel-card { border-radius: 20px; } } @media (prefers-reduced-motion: reduce) { .ap-carousel-track { scroll-behavior: auto; } .ap-carousel-dot { transition: none; } } /* ============================================================================ Home-Hero Rotation (Welt-Hero-Bilder, Apple-Style Eyebrow als Link) ============================================================================ */ .ap-eyebrow--linked { display: inline-flex; align-items: center; gap: 4px; color: var(--c-link, #1f6da8) !important; text-decoration: none; transition: opacity 0.18s; } .ap-eyebrow--linked:hover { opacity: 0.75; } .ap-eyebrow--linked:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 4px; border-radius: 4px; } /* ============================================================================ Crop-Modal (manuelles Rechteck-Crop beim Upload) ============================================================================ */ .ef-crop-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.78); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ef-crop-panel { background: #fff; border-radius: 16px; max-width: 920px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } .ef-crop-head { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 4px; } .ef-crop-head strong { font-family: var(--font-text, sans-serif); font-size: 16px; font-weight: 600; color: #1d1d1f; } .ef-crop-hint { font-size: 13px; color: #6e6e73; } .ef-crop-stage { position: relative; flex: 1; background: #1d1d1f; display: flex; align-items: center; justify-content: center; min-height: 240px; max-height: 70vh; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; } .ef-crop-img { max-width: 100%; max-height: 70vh; object-fit: contain; pointer-events: none; user-select: none; } .ef-crop-rect { position: absolute; border: 2px solid #fff; box-sizing: border-box; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.3); pointer-events: auto; cursor: move; touch-action: none; } /* iPhone-Style 8 Handles: 4 Ecken + 4 Kanten-Mitten */ .ef-crop-handle { position: absolute; background: #fff; border: 2px solid #1d1d1f; border-radius: 50%; pointer-events: auto; z-index: 10; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Touch-Target: groesser als visuell sichtbar */ width: 18px; height: 18px; /* Hit-Area auf Mobile vergroessern */ } .ef-crop-handle::before { content: ""; position: absolute; inset: -10px; /* unsichtbare Vergroesserung der Hit-Area fuer Finger */ } .ef-crop-handle--nw { top: -10px; left: -10px; cursor: nwse-resize; } .ef-crop-handle--ne { top: -10px; right: -10px; cursor: nesw-resize; } .ef-crop-handle--sw { bottom: -10px; left: -10px; cursor: nesw-resize; } .ef-crop-handle--se { bottom: -10px; right: -10px; cursor: nwse-resize; } .ef-crop-handle--n { top: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; } .ef-crop-handle--s { bottom: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; } .ef-crop-handle--e { top: 50%; right: -10px; transform: translateY(-50%); cursor: ew-resize; } .ef-crop-handle--w { top: 50%; left: -10px; transform: translateY(-50%); cursor: ew-resize; } /* Drittel-Hilfslinien innerhalb des Rahmens (Apple-Photo-Style) */ .ef-crop-rect::before, .ef-crop-rect::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.4); pointer-events: none; } .ef-crop-rect::before { /* horizontale Drittel-Linien */ left: 0; right: 0; top: 33.333%; height: 1px; box-shadow: 0 33.333% 0 rgba(255, 255, 255, 0.4); } .ef-crop-rect::after { /* vertikale Drittel-Linien */ top: 0; bottom: 0; left: 33.333%; width: 1px; box-shadow: 33.333% 0 0 rgba(255, 255, 255, 0.4); } .ef-crop-actions { padding: 12px 16px; border-top: 1px solid #eee; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ef-crop-btn { appearance: none; border: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: var(--font-text, sans-serif); cursor: pointer; transition: opacity 0.15s, background 0.15s; } .ef-crop-btn-primary { background: #1d1d1f; color: #fff; } .ef-crop-btn-primary:hover:not(:disabled) { background: #000; } .ef-crop-btn-primary:disabled { background: #c7c7cc; color: #fff; cursor: not-allowed; } .ef-crop-btn-light { background: #f5f5f7; color: #1d1d1f; } .ef-crop-btn-light:hover { background: #ebebed; } .ef-crop-btn-ghost { background: transparent; color: #6e6e73; } .ef-crop-btn-ghost:hover { background: rgba(0, 0, 0, 0.06); color: #1d1d1f; } .ef-crop-btn:focus-visible { outline: 2px solid #5ea6ff; outline-offset: 2px; } @media (max-width: 640px) { .ef-crop-actions { padding: 10px 12px; } .ef-crop-btn { padding: 7px 12px; font-size: 12px; } } /* Crop-Modal: Meta-Felder (Name/Modell/Einsatzgebiet) — generieren Auto-Alt fuer SEO */ .ef-crop-meta { padding: 14px 20px; border-top: 1px solid #eee; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; } @media (max-width: 720px) { .ef-crop-meta { grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; } } .ef-crop-meta-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .ef-crop-meta-field span { color: #6e6e73; font-weight: 500; } .ef-crop-meta-field input { padding: 8px 10px; border-radius: 8px; border: 1px solid #d2d2d7; font-family: var(--font-text, sans-serif); font-size: 14px; color: #1d1d1f; background: #fff; transition: border-color 0.15s; } .ef-crop-meta-field input:focus { outline: none; border-color: #5ea6ff; box-shadow: 0 0 0 3px rgba(94, 166, 255, 0.18); } .ef-crop-meta-preview { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #6e6e73; font-style: italic; } /* ============ Utilities (SSOT, ersetzt wiederkehrende inline styles) * Bernd 16.05.2026 — Audit-Phase: 192 inline styles im Web-Modul. * Diese Utility-Klassen decken die 80%-Faelle ab. Templates werden * iterativ in naechster Session umgestellt. * ============ */ /* Spacing — Margin-Top */ .ap-mt-2xs { margin-top: 12px; } .ap-mt-xs { margin-top: 8px; } .ap-mt-sm { margin-top: 16px; } .ap-mt-md { margin-top: 24px; } .ap-mt-lg { margin-top: 32px; } .ap-mt-40 { margin-top: 40px; } .ap-mt-xl { margin-top: 48px; } .ap-mt-xxl { margin-top: 56px; } .ap-mt-3xl { margin-top: 64px; } /* Spacing — Section-Stack (z.B. nach H2 + vor Bullet-Liste) */ .ap-stack-md { margin: 40px 0 16px; } /* Container-Breiten fuer Prosa-Bloecke (Texte mit max-width fuer Lesbarkeit) */ .ap-prose { max-width: 760px; margin-left: auto; margin-right: auto; } .ap-prose-narrow { max-width: 680px; margin-left: auto; margin-right: auto; } .ap-prose-tight { max-width: 600px; margin-left: auto; margin-right: auto; } .ap-prose-wide { max-width: 800px; margin-left: auto; margin-right: auto; } /* Bullet-Liste mit grossem Spacing (statt inline margin-top+padding+list-style) */ .ap-bullet-stack { margin-top: 32px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; text-align: left; } /* Text-Center + Color-Helper fuer kleine Hinweise */ .ap-text-center { text-align: center; } .ap-muted-note { color: var(--c-muted); font-size: 14px; } /* Performance-Welt-Akzent: blauer Eyebrow (Brand-Color) */ .ap-eyebrow-perf { color: #5ea6ff; } /* Sub-Text auf dunklem Hero (z.B. Performance-CTA-Block) */ .ap-sub-on-dark { color: #f5f5f7; max-width: 640px; margin: 16px auto 0; } /* Button-Override fuer dunkle Heros — weisser Text, weisse/semi-Border */ .ef-btn-on-dark { color: #fff !important; border-color: rgba(255,255,255,0.4) !important; } .ef-btn-on-dark--strong { color: #fff !important; border-color: #fff !important; } /* Quote-Liste (Team-Page, evt. auch Welten) — gestackte Quote-Cards */ .ap-quote-stack { margin-top: 40px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .ap-quote-stack li { font-size: 18px; line-height: 1.5; padding: 14px 18px; background: var(--c-bg-alt, #f5f5f7); border-radius: 12px; } /* Variante .ap-sub-muted (statt inline color+max-width+margin) */ .ap-sub-muted { color: var(--c-muted); max-width: 680px; margin: 16px auto 0; } /* Lesbare Body-Text-Klassen (statt inline font-size+line-height) */ .ap-body { font-size: 16px; line-height: 1.6; } .ap-body-lg { font-size: 17px; line-height: 1.6; } .ap-body-muted { font-size: 16px; line-height: 1.6; color: var(--c-muted); } .ap-body-list { font-size: 16px; line-height: 1.6; padding-left: 24px; } .ap-muted-small { opacity: 0.65; font-size: 14px; } /* Footer-Hinweis-Block (Sub-Text unter CTAs etc.) */ .ap-footer-note { color: var(--c-muted); max-width: 600px; margin: 16px auto 0; font-size: 15px; line-height: 1.55; } /* Box mit dezenter Hintergrund-Akzentuierung (z.B. Hinweise/Info-Bloecke) */ .ap-info-box { padding: 12px 18px; background: var(--c-bg, #fff); border-radius: 12px; } /* Inline-CTA-Links innerhalb von Cards (Brand-Link-Farbe + fett, ohne Underline) */ .ap-link-cta { color: var(--c-link); text-decoration: none; font-weight: 600; } /* Sekundaerer Link (Text-Farbe + Unterstrich) */ .ap-link-underline { color: var(--c-text); text-decoration: underline; } /* Leasing-Anbieter-Card: Logo-Frame + Logo-Bild + Empty-Placeholder */ .ap-leasing-logo { height: 48px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px; } .ap-leasing-logo-img { max-height: 36px; max-width: 140px; object-fit: contain; } .ap-leasing-logo-empty { height: 24px; margin-bottom: 8px; } /* Card-Price-Varianten (statt inline font-size+padding) */ .ap-hcarousel-card-price--sm { font-size: 14px; padding-top: 14px; } .ap-hcarousel-card-price--md { font-size: 15px; } /* Mittiger Card-Container im Karussell (z.B. Rechenbeispiel) */ .ap-card-centered { margin: 0 auto; } /* Sub-Muted in 640px-Variante (Leasing-CTA-Block) */ .ap-sub-muted-medium { color: var(--c-muted); max-width: 640px; margin: 16px auto 0; } /* Leasing-Hero-Disclaimer (kleine graue Notiz unter Hero-CTAs) */ .ap-leasing-disclaimer { color: var(--c-muted); font-size: 13px; margin-top: 18px; max-width: 640px; } /* Narrow inner-container (720px) — z.B. Werkstatt-Headline-Block */ .ap-inner--narrow-720 { max-width: 720px; } /* Sub-Muted in 600px-Variante (Werkstatt-CTA-Block) */ .ap-sub-muted-600 { color: var(--c-muted); max-width: 600px; margin: 16px auto 0; } /* ============================================================ * Hygiene-Pack Phase 3 (17.05.2026) — restliche Inline-Styles raus * ============================================================ */ /* Heading-Block (Margin 0 0 16px) — H2/H3 in News-Templates + Legal-Seiten */ .ap-h-block { margin: 0 0 16px; } /* Mehr Margin-Top-Skala */ .ap-mt-32 { margin-top: 32px; } /* Generischer muted-Text (kleiner grau auf normaler Linie) */ .ap-text-muted { color: var(--c-muted); } /* Disclaimer-Note unten auf Legal-Seiten + Grounding (font 13 + muted + mt 48) */ .ap-disclaimer-note { font-size: 13px; color: var(--c-muted); margin-top: 48px; } /* Welten-Sub-CTA-Block (mt 24 + muted + font 14) — z.B. alltag-ebike */ .ap-cta-disclaimer-sm { margin-top: 24px; color: var(--c-muted); font-size: 14px; } /* Home-Newsletter-Disclaimer-Variante (mt 48 + muted + font 14) */ .ap-newsletter-note { margin-top: 48px; color: var(--c-muted); font-size: 14px; } /* Container-Breiten extra (560px Lead-Text in Welten-Stages) */ .ap-prose-560 { max-width: 560px; } /* ef-link white-on-dark Variante (statt inline color:#fff) */ .ef-link--on-dark { color: #fff; } /* Inline-Form (statt style="display:inline;") */ .ap-form-inline { display: inline; } /* Logo-Fallback (initial hidden, JS toggle bei broken image) */ .ef-logo-fallback-hidden { display: none; } /* Welten-Coming-Soon CTA-Spacer */ .ap-coming-soon-cta { margin-top: 24px; } /* Kontakt-Buttons: rechts + bottom margin fuer Wrap */ .ap-kontakt-btn-row { margin-right: 8px; margin-bottom: 8px; } .ap-kontakt-btn-row--last { margin-bottom: 8px; } /* Kontakt-Werkstatt-Link */ .ap-kontakt-link { margin-top: 6px; } /* Maps-Link unter Adresse */ .ap-kontakt-maps { margin-top: 8px; } /* Ueber-uns Werte-Block 56px-Spacer */ .ap-werte-block { margin-top: 56px; max-width: var(--container); margin-left: auto; margin-right: auto; } /* Buchen-Wrapper Debug-Box (nur DEV-Env, dezent) */ .ap-debug-details { text-align: left; font-size: 13px; color: var(--c-muted); max-width: 600px; margin: 24px auto 0; } .ap-debug-summary { cursor: pointer; } .ap-debug-pre { white-space: pre-wrap; background: rgba(0,0,0,0.04); padding: 12px; border-radius: 8px; margin-top: 8px; } /* ============================================================ * Admin-Login (Web-Modul Edit-Mode Maske) * Eigene Komponenten-Klassen statt inline-Styles (17 raus) * ============================================================ */ .ap-admin-login-section { min-height: 80vh; display: flex; align-items: center; } .ap-admin-login-inner { max-width: 420px; margin: 0 auto; } .ap-admin-login-header { text-align: center; margin-bottom: 40px; } .ap-admin-login-title { font-size: 32px; } .ap-admin-login-subtitle { margin-top: 12px; color: var(--c-muted); font-size: 15px; } .ap-admin-login-alert { margin-bottom: 20px; padding: 14px 16px; background: #fff4f4; border: 1px solid #f0c0c0; border-radius: 12px; color: #8a1f1f; font-size: 14px; } .ap-admin-login-alert p { margin: 0; } .ap-admin-login-status { margin-bottom: 20px; padding: 14px 16px; background: #f0f9f0; border: 1px solid #c0e0c0; border-radius: 12px; color: #1f5a1f; font-size: 14px; } .ap-admin-login-form { display: flex; flex-direction: column; gap: 16px; } .ap-admin-login-field { display: flex; flex-direction: column; gap: 6px; } .ap-admin-login-label { font-size: 13px; font-weight: 600; color: var(--c-text); } .ap-admin-login-input { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 12px; font-size: 16px; background: #fff; } .ap-admin-login-submit { margin-top: 8px; } .ap-admin-login-foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--c-muted); } /* ============================================================ * Live-Slot-Pill (Werkstatt-Verfuegbarkeit) * Container-Klassen statt inline (dot-color bleibt dynamisch inline) * ============================================================ */ .ap-live-slot-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0,0,0,0.06); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--c-text); margin-top: 12px; } .ap-live-slot-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ap-live-slot-line { margin-top: 8px; font-size: 14px; color: var(--c-muted); display: flex; align-items: center; gap: 6px; } .ap-live-slot-dot--sm { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* ============================================================ * News-System v2 (16.05.2026) * Index-Filter, Featured-Card, Card-Grid, Related-Block * ============================================================ */ /* Filter-Zeile (Suche + Kategorie-Chips) */ .ap-news-filter { display: flex; flex-direction: column; gap: 16px; align-items: center; } .ap-news-search { display: flex; gap: 8px; width: 100%; max-width: 480px; } .ap-news-search-input { flex: 1; padding: 10px 14px; border: 1px solid var(--c-line, #e5e5e7); border-radius: 10px; font: inherit; background: var(--c-bg, #fff); color: var(--c-text); } .ap-news-search-input:focus { outline: 2px solid var(--c-link); outline-offset: 1px; border-color: var(--c-link); } .ap-news-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ap-news-cat-link { padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,0.04); color: var(--c-text); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 120ms ease; } .ap-news-cat-link:hover { background: rgba(0,0,0,0.08); } .ap-news-cat-link.is-active { background: var(--c-text); color: var(--c-bg, #fff); } .ap-news-cat-tag { display: inline-block; padding: 2px 10px; background: rgba(0,0,0,0.06); border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Featured-Card (1 grosse Card oben) */ .ap-news-featured { display: grid; grid-template-columns: 1fr; gap: 24px; text-decoration: none; color: inherit; border-radius: 22px; overflow: hidden; transition: transform 200ms ease; } .ap-news-featured:hover { transform: translateY(-3px); } @media (min-width: 768px) { .ap-news-featured { grid-template-columns: 1.5fr 1fr; align-items: center; } } .ap-news-featured-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--c-bg-alt, #f5f5f7); } .ap-news-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap-news-featured-body { padding: 8px 0; } /* Card-Grid (3-spaltig auf Desktop) */ .ap-news-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .ap-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ap-news-grid { grid-template-columns: repeat(3, 1fr); } } .ap-news-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: transform 200ms ease; } .ap-news-card:hover { transform: translateY(-3px); } .ap-news-card-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--c-bg-alt, #f5f5f7); } .ap-news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ap-news-card-body { padding: 4px 0; } .ap-news-card-title { font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; font-weight: 700; margin: 8px 0 4px; color: var(--c-text); } .ap-news-card-lead { color: var(--c-muted); font-size: 15px; line-height: 1.5; margin: 0; } /* Pagination */ .ap-news-pagination { margin-top: 48px; } .ap-news-pagination nav { display: flex; justify-content: center; gap: 12px; } .ap-news-pagination a, .ap-news-pagination span { padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,0.04); color: var(--c-text); text-decoration: none; font-size: 14px; } .ap-news-pagination a:hover { background: rgba(0,0,0,0.08); } .ap-news-pagination .disabled { opacity: 0.4; } /* Related-Block (am Ende von Post-Detail) */ .ap-related-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .ap-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ap-related-grid { grid-template-columns: repeat(3, 1fr); } } .ap-related-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--c-bg-alt, #f5f5f7); border-radius: 14px; text-decoration: none; color: inherit; transition: background 120ms ease; } .ap-related-card:hover { background: rgba(0,0,0,0.06); } .ap-related-card-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); font-weight: 600; } .ap-related-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; } .ap-related-card--news .ap-related-card-name { line-height: 1.3; } /* ============ News-Related-Block (Phase W3.2 Punkt 4) ============ * "Aktuelles zu {Marke}" / "Aktuelles aus {Welt}" — kleine Card-Grid * weiter unten auf Marken-/Welten-Detail-Seiten. Bewusst zurueckhaltend. */ .ap-news-related { /* nutzt ap-section padding */ } .ap-news-related-grid { display: grid; gap: 16px; margin-top: 32px; grid-template-columns: 1fr; } @media (min-width: 720px) { .ap-news-related-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .ap-news-related-grid { grid-template-columns: repeat(3, 1fr); } } .ap-news-related-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 14px; background: var(--c-bg-alt, #f5f5f7); text-decoration: none; color: inherit; transition: background 120ms ease, transform 120ms ease; } .ap-news-related-card:hover { background: rgba(0,0,0,0.06); transform: translateY(-2px); } .ap-news-related-meta { font-size: 12px; color: var(--c-muted, #6b7280); margin: 0; display: flex; gap: 6px; flex-wrap: wrap; } .ap-news-related-cat { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .ap-news-related-date { /* nur Datum */ } .ap-news-related-title { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--c-text, #111); } .ap-news-related-lead { font-size: 14px; line-height: 1.5; color: var(--c-text, #111); margin: 0; opacity: 0.85; } .ap-news-related-cta { font-size: 13px; font-weight: 600; color: var(--c-link, #2563eb); margin-top: auto; }