/* ========================================================================= 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 { background: var(--c-primary); color: #fff; } .ef-btn-dark:hover { background: #000; } .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; } } .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); } /* ========================================================================= 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%); } /* Dark-Variante: weicher Schwarz-Gradient am oberen Bildrand, damit der Uebergang vom Text-Panel zum Bild nahtlos ist. */ .ap-welt-hero.dark .ap-welt-hero-image::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 140px; background: linear-gradient(to bottom, #1d1d1f 0%, rgba(29,29,31,0.7) 40%, transparent 100%); z-index: 2; pointer-events: none; } /* Light-Variante: kein Gradient noetig, Image fluesst in den weissen Background-Bereich (kein Sichtbar-Issue). */ /* ============ 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; } /* ============ Bike-Card-Grid (Modell-Highlights) ============ */ .ap-bikes-grid { max-width: var(--container); margin: 56px auto 0; display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .ap-bikes-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .ap-bikes-grid { grid-template-columns: repeat(3, 1fr); } } .ap-bike-card { background: var(--c-bg); border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--c-line); display: flex; flex-direction: column; } .ap-section.alt .ap-bike-card { background: #fff; } .ap-bike-image { aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-alt); } .ap-bike-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); } .ap-bike-body { padding: 24px 22px; } .ap-bike-brand { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-muted); margin: 0 0 8px; } .ap-bike-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.022em; margin: 0 0 6px; color: var(--c-text); } .ap-bike-tagline { font-size: 15px; color: var(--c-muted); line-height: 1.4; margin: 0; } /* ============ 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 */ /* ============ Brand-Card (groesser, mit Beschreibung + Tags + Pfeil) ============ */ .ap-brand-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 48px 0 0; } @media (min-width: 720px) { .ap-brand-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1080px) { .ap-brand-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1280px) { .ap-brand-cards { grid-template-columns: repeat(4, 1fr); } } .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; } .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; } /* ============ 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; }