/* ============================================================================ web4data Marketing — Design-System ("Editorial Trust") Selbst-enthalten (app.patdata.de Docroot). Werte-treu zu httpdocs/global.css, Akzent pro Marke via body[data-brand] -> EINE Token-Quelle: web4data_brands. Inter wird über /assets/fonts/google-fonts.css geladen. Kein Tailwind. ============================================================================ */ :root { /* Neutrals — kühle slate + warmer stone-Wechsel */ --ink: #0B1437; /* Headlines / Text-Primär (= global --navy) */ --ink-soft: #475569; /* Body */ --ink-mute: #64748B; /* Lead / Meta */ --ink-faint: #64748B; /* WCAG-AA-Kontrast auf Weiss (zuvor #94A3B8 = 2.9:1, zu niedrig) */ --line: #E2E8F0; /* Standard-Hairline */ --line-soft: #F1F5F9; --white: #FFFFFF; --stone-50: #FAFAF9; /* warmer Flächenwechsel */ --stone-100: #F5F5F4; --stone-200: #E7E5E4; --ok: #047857; /* 5,48:1 auf Weiss. Zuvor #059669 = 3,77:1 - reicht fuer Text nicht (WCAG 2.1 AA). */ /* Marken-Akzent — Default = Dach (web4data). Pro Seite via body[data-brand] gesetzt. */ --brand: #581C87; --brand-cta: #581C87; --brand-fg: #FFFFFF; --brand-pill: color-mix(in srgb, #581C87 8%, white); --brand-hov: color-mix(in srgb, #581C87 12%, transparent); /* Typografie */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', Menlo, Consolas, monospace; --h1: clamp(2.5rem, 5.2vw, 3.75rem); --h2: clamp(1.875rem, 3.2vw, 2.5rem); --h3: 1.5rem; --h4: 1.25rem; --body: 1.0625rem; --body-lg: 1.25rem; --small: 0.875rem; --tiny: 0.75rem; --xs: 0.6875rem; /* Spacing (8pt) */ --s-xs: 0.5rem; --s-sm: 1rem; --s-md: 1.5rem; --s-lg: 2rem; --s-xl: 3rem; --s-2xl: 4rem; --s-3xl: 5rem; --s-section: 8rem; /* Layout */ --max-w: 1200px; --max-w-narrow: 900px; --max-w-text: 720px; --gutter: 1.5rem; --r-btn: 3px; --r-card: 4px; --r-shot: 4px; --shadow-sm: 0 1px 2px rgba(11,20,55,.05); --shadow-md: 0 2px 6px rgba(11,20,55,.06), 0 10px 28px -10px rgba(11,20,55,.14); --shadow-lg: 0 8px 22px -8px rgba(11,20,55,.14), 0 28px 56px -18px rgba(11,20,55,.22); --shadow-shot: var(--shadow-md); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Kennzeichnung von Beitragsarten und Pflichthinweisen (Blog, Ratgeber). Werte aus app/pages/marketing/blog.php uebernommen, wo sie bis 15.08.2026 hartkodiert standen. Jedes Paar gegen SEINE Flaeche gerechnet, nicht gegen Weiss. Verwandt, aber NICHT deckungsgleich: --farbe-warnung* in tokens.css deckt den App-Kontext ab und wird auf den Marketingseiten gar nicht geladen. */ --kennz-werbung: #92400E; /* Text auf -flaeche: 6,37:1 */ --kennz-werbung-flaeche: #FEF3C7; --kennz-fachlich: #075985; /* Text auf -flaeche: 6,59:1 */ --kennz-fachlich-flaeche: #E0F2FE; --offenlegung: #7C2D12; /* Text auf -flaeche: 8,83:1 */ --offenlegung-flaeche: #FFF7ED; --offenlegung-rand: #FED7AA; /* nur Begrenzung, 1,27:1 — traegt keinen Text */ --offenlegung-mark: #EA580C; /* nur Sinnbild, 3,35:1 — kein Fliesstext */ /* Statustrio. --ok gab es schon, seine Geschwister fehlten; deshalb standen Warn- und Fehlerfarben hartkodiert in app/pages/onboarding/index.php. Alle drei Flaechen aus derselben Tonstufe, jedes Paar gegen SEINE Flaeche gerechnet. --ok-flaeche ersetzt ein color-mix(--ok 14%, #fff), das nur 4,49:1 erreichte und AA damit knapp verfehlte. */ --ok-flaeche: #D1FAE5; /* --ok darauf: 4,84:1 */ --warnung: #B45309; /* auf --warnung-flaeche: 4,51:1 */ --warnung-flaeche: #FEF3C7; /* gleicher Hex wie --kennz-werbung-flaeche, aber andere Bedeutung — bewusst getrennt */ --fehler: #B91C1C; /* auf --fehler-flaeche: 5,30:1 */ --fehler-flaeche: #FEE2E2; } /* Marken-Layer — jede Marke braucht NUR EINEN Hex in der Quelle (web4data_brands.primary_color) */ body[data-brand="web4data"] { --brand:#581C87; --brand-cta:#581C87; --brand-fg:#fff; } body[data-brand="patdata"] { --brand:#1B2A4A; --brand-cta:#2E4470; --brand-fg:#fff; } /* CTA aufgehellt, WCAG-AA */ body[data-brand="clockdata"] { --brand:#0E7490; --brand-cta:#0E7490; --brand-fg:#fff; } body[data-brand="juristdata"]{ --brand:#7C2D12; --brand-cta:#7C2D12; --brand-fg:#fff; } body[data-brand="notdata"] { --brand:#92400E; --brand-cta:#92400E; --brand-fg:#fff; } body[data-brand] { --brand-pill: color-mix(in srgb, var(--brand) 8%, white); --brand-hov: color-mix(in srgb, var(--brand) 12%, transparent); } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; } body { font-family: var(--font); font-size: var(--body); line-height: 1.65; color: var(--ink-soft); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-feature-settings: "tnum" 1, "cv05" 1, "ss01" 1; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--brand); text-decoration: none; transition: color .15s ease; } ul, ol { list-style: none; } /* --- Typografie --- */ h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: var(--h1); letter-spacing: -0.021em; line-height: 1.06; } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); } p { margin-bottom: var(--s-sm); } p:last-child { margin-bottom: 0; } strong { color: var(--ink); font-weight: 600; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .lead { font-size: var(--body-lg); line-height: 1.6; color: var(--ink-mute); } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 var(--gutter); } .container-text { max-width: var(--max-w-text); margin: 0 auto; padding: 0 var(--gutter); } section { padding: var(--s-section) 0; } .section-stone { background: var(--stone-50); } .section-line { border-top: 1px solid var(--line); } .section-dark { background: var(--ink); color: rgba(255,255,255,0.78); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; } .section-dark p { color: rgba(255,255,255,0.68); } .section-dark .overline { color: color-mix(in srgb, var(--brand) 55%, white); } /* --- Overline + Section-Kopf (linksbündig, Editorial) --- */ .overline { font-family: var(--font-display); font-size: var(--xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: var(--s-sm); display: block; } .section-head { max-width: var(--max-w-text); margin-bottom: var(--s-3xl); } .section-head p { font-size: var(--body-lg); color: var(--ink-mute); margin-top: var(--s-md); } /* --- Grid --- */ .grid { display: grid; gap: var(--s-3xl); } .grid-7-5 { grid-template-columns: 7fr 5fr; } .grid-5-7 { grid-template-columns: 5fr 7fr; } .grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); } .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); } .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-md); } .grid-center { align-items: center; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 48px; padding: 0 1.5rem; font-family: var(--font); font-size: var(--small); font-weight: 600; border-radius: var(--r-btn); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease-out), filter .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; } .btn-primary { background: var(--brand-cta); color: var(--brand-fg); border-color: var(--brand-cta); box-shadow: 0 1px 2px rgba(11,20,55,.12); } .btn-primary:hover { color: var(--brand-fg); filter: brightness(1.06); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 58%, transparent); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--line); } .btn-outline:hover { border-color: var(--ink); color: var(--ink); } /* WCAG 1.4.11 verlangt fuer Bedienelemente 3,0:1 gegen den Hintergrund. Die Markenfarbe auf --ink erreicht das nicht: web4data/patdata 1,65:1 · juristdata 1,92 · notdata 2,52 (nur clockdata besteht mit 3,35). Statt die Markenfarbe aufzuhellen bekommt der Knopf eine Kante — rgba(255,255,255,.40) ergibt 3,77:1 gegen --ink, die Flaeche bleibt wie entworfen. Der weisse Text darauf liegt ohnehin bei 5,36:1 bis 10,88:1. */ .section-dark .btn-primary { border: 1px solid rgba(255,255,255,.40); } .section-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,.28); } .section-dark .btn-outline:hover { border-color: #fff; } .btn-arrow::after { content: '\2192'; transition: transform .2s ease; } .btn-arrow:hover::after { transform: translateX(3px); } /* Trefferflaeche: im Kopfbrowser mit 137x23 px gemessen — WCAG 2.5.8 fordert 24x24. min-height statt Polster, damit die Zeile optisch gleich bleibt; in der .cta-row stehen diese Links neben Knoepfen und richten sich damit sogar sauberer auf deren Hoehe aus. */ .link-arrow { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; font-size: var(--small); color: var(--brand); min-height: 44px; } .link-arrow:hover { gap: .625rem; } /* --- Header --- */ .mk-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease; } .mk-header.scrolled { border-bottom-color: var(--line); } .mk-nav { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); } .mk-logo { display: inline-flex; align-items: center; color: var(--ink); min-height: 44px; } /* 18.08.2026: Trefferflaeche; das Bild ist mobil nur 20 px hoch */ .mk-logo svg { height: 46px; width: auto; display: block; } /* 17.08.2026: Das web4data-Lockup lag in einer 1400x472-Leinwand, deren Inhalt nur 145 Einheiten hoch war — 69 % leerer Rand. Bei 48 px CSS-Hoehe blieben optisch 14,8 px uebrig, das Logo wirkte verloren in einem 89 px hohen Header. Die SVG-viewBox ist jetzt auf den Inhalt beschnitten (81 175 1239 146), damit entspricht die CSS-Hoehe der tatsaechlichen Zeichenhoehe. Deshalb steht hier eine kleinere Zahl als vorher — sie ergibt ein DOPPELT so grosses Logo. */ .mk-logo img, .mk-logo-svg { height: 24px; width: auto; display: block; } .mk-logo-light { color: #fff; } @media (max-width: 640px) { .mk-logo svg, .mk-logo-svg, .mk-logo img { height: 20px; } } .mk-navlinks { display: flex; align-items: center; gap: var(--s-lg); } /* Auf dem Tablet standen diese Eintraege mit 60x23 px unter der 24x24-Untergrenze (WCAG 2.5.8). Die Leiste ist bereits 44 px hoch — inline-flex zieht die Flaeche darauf, ohne die Leiste zu veraendern. */ .mk-navlinks a { color: var(--ink-soft); font-size: var(--small); font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; } /* Spezifitaet 0,2,0 - schlaegt .mk-navlinks a (0,1,1) aus dem Tap-Ziel-Fix darueber. Ohne den Nachzug stand der mobile CTA am Desktop neben dem Header-CTA (gemessen). */ .mk-navlinks .mk-mobile-cta { display: none; } .mk-navlinks a:hover { color: var(--ink); } .mk-actions { display: flex; align-items: center; gap: var(--s-sm); } /* Produkt-Switcher (Mega-Dropdown) */ .mk-switch { position: relative; } .mk-switch > button { background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink-soft); font-size: var(--small); font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; } .mk-switch > button:hover { color: var(--ink); } .mk-menu { position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%) translateY(-6px); width: 560px; max-width: 92vw; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-shot); padding: var(--s-md); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; } .mk-switch:focus-within .mk-menu, .mk-switch[data-open="1"] .mk-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mk-menu-item { display: flex; gap: .75rem; padding: .75rem; border-radius: var(--r-btn); align-items: flex-start; } .mk-menu-item:hover { background: var(--stone-50); } .mk-menu-item .sq { flex: none; } .mk-menu-item .t { display: block; font-weight: 600; color: var(--ink); font-size: var(--small); } .mk-menu-item .d { display: block; margin-top: .15rem; font-size: var(--tiny); color: var(--ink-mute); line-height: 1.4; } /* Der Menue-Knopf ist auf schmalen Schirmen der EINZIGE Zugang zur Navigation. Im Kopfbrowser gemessen war seine Trefferflaeche 25x26 px (kein Polster, nur die Glyphe) — WCAG 2.5.8 fordert 24x24 als Untergrenze, Apple und Google nennen 44x44. Der Knopf bleibt optisch gleich gross, die Flaeche waechst ueber Polster und eine Mindestgroesse. place-items zentriert die Glyphe darin. */ .mk-burger { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--ink); cursor: pointer; min-width: 44px; min-height: 44px; padding: 9px; margin-right: -9px; place-items: center; } /* Produkt-Mark (52px / 40px Marken-Atom: Squircle-"D" als SVG) */ .sq { width: 40px; height: 40px; display: inline-flex; flex: none; } .sq svg { width: 100%; height: 100%; display: block; } .sq-lg { width: 52px; height: 52px; } /* --- Browser-Frame (Screenshot-Rahmen / ehrliches Gerüst) --- */ .frame { border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); } .frame-top { border-top: 2px solid var(--brand); } .frame-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-bottom: 1px solid var(--line-soft); background: var(--stone-50); } .frame-bar .dots { display: none; } .frame-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--stone-200); } .frame-url { font-family: var(--font-mono); font-size: var(--tiny); color: var(--ink-mute); background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: .15rem .5rem; } .frame-body { padding: 0; } .frame-tabs { display: flex; gap: .25rem; padding: .5rem .75rem 0; border-bottom: 1px solid var(--line-soft); background: #fff; } .frame-tab { font-size: var(--tiny); font-weight: 600; color: var(--ink-mute); padding: .45rem .7rem; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; } .frame-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); } /* Ehrliches Datentabellen-Gerüst (Fallback statt Fake-UI) */ .scaffold { width: 100%; border-collapse: collapse; font-size: var(--small); } .scaffold th { text-align: left; font-size: var(--tiny); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .scaffold td { padding: .7rem 1rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); } .scaffold td.m { font-family: var(--font-mono); color: var(--ink); } .scaffold .pill { font-size: var(--tiny); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--brand-pill); color: var(--brand); } /* --- Feature-Reihe --- */ .feature-row { padding: var(--s-2xl) 0; border-top: 1px solid var(--line-soft); } .feature-row:first-of-type { border-top: 0; } .beleg { margin-top: var(--s-md); display: grid; gap: .6rem; } .beleg li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--small); color: var(--ink-soft); } .beleg li i { color: var(--brand); margin-top: .15rem; flex: none; } .chip { font-family: var(--font-mono); font-size: var(--tiny); background: var(--stone-100); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .4rem; color: var(--ink); } /* --- Produkt-Karte (Portfolio) --- */ .product-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .28s var(--ease-out), border-color .28s ease, transform .28s var(--ease-out); } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); } .product-card .accent { height: 4px; } .product-card .body { padding: var(--s-lg); } .product-card h3 { font-size: var(--h4); margin: var(--s-md) 0 .35rem; } .product-card p { font-size: var(--small); color: var(--ink-mute); } .product-card .status { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--s-md); font-size: var(--tiny); font-weight: 600; color: var(--ok); } .product-card.soon { border-style: dashed; } .product-card.soon .status { color: var(--ink-mute); } /* --- Vertrauensleiste --- */ .trustbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; } .trustbar span { font-size: var(--small); font-weight: 600; color: var(--ink-mute); padding: .85rem 1.25rem; border-right: 1px solid var(--line-soft); letter-spacing: .01em; } .trustbar span:last-child { border-right: 0; } /* --- Compliance (dark) --- */ .compliance-item { display: flex; gap: .85rem; align-items: flex-start; padding: var(--s-md) 0; border-top: 1px solid rgba(255,255,255,.1); } .compliance-item:first-child { border-top: 0; } .compliance-item i { color: color-mix(in srgb, var(--brand) 60%, white); font-size: 1.25rem; margin-top: .1rem; flex: none; } .compliance-item .t { color: #fff; font-weight: 600; } .compliance-item .d { font-size: var(--small); color: rgba(255,255,255,.66); } /* --- KPI --- */ .kpi-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-lg); background: #fff; } .kpi-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-feature-settings: "tnum" 1; } .kpi-label { font-size: var(--small); color: var(--ink-soft); margin-top: .25rem; } .kpi-source { font-size: var(--tiny); color: var(--ink-faint); margin-top: var(--s-sm); } .source-list { margin-top: var(--s-xl); font-size: var(--tiny); color: var(--ink-faint); } .source-list li { margin-bottom: .25rem; } /* --- Lead-Formular --- */ .lead-form { display: grid; gap: var(--s-md); } .field label { display: block; font-size: var(--small); font-weight: 500; color: var(--ink-soft); margin-bottom: .35rem; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: var(--small); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-btn); padding: .65rem .85rem; transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--small); color: var(--ink-mute); } .consent input { margin-top: .2rem; width: 16px; height: 16px; flex: none; } .form-note { font-size: var(--tiny); color: var(--ink-faint); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- FAQ --- */ .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: var(--s-md) 0; font-weight: 600; color: var(--ink); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary i { color: var(--ink-mute); transition: transform .2s ease; } .faq details[open] summary i { transform: rotate(180deg); } .faq .a { padding: 0 0 var(--s-md); color: var(--ink-soft); font-size: var(--small); max-width: var(--max-w-text); } /* --- Sub-Nav (Produktseiten) --- */ .sub-nav { position: sticky; top: 80px; z-index: 90; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .28s ease, opacity .2s ease, visibility .28s, border-color .28s; } .sub-nav.is-visible { max-height: 56px; opacity: 1; visibility: visible; border-bottom-color: var(--line); } .sub-nav .inner { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); } .sub-nav .links { display: flex; gap: var(--s-md); overflow-x: auto; } /* Sprungmarken-Leiste. Im Kopfbrowser bei 320 px mit 46-67 x 23 px gemessen — unter der Untergrenze 24x24 aus WCAG 2.5.8. Die Flaeche waechst ueber min-height, die Schriftgroesse bleibt; die Leiste traegt das, weil ihre Eintraege ohnehin nebeneinander stehen. */ .sub-nav .links a { font-size: var(--small); color: var(--ink-mute); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; } .sub-nav .links a:hover { color: var(--ink); } /* --- Pricing-Karten --- */ .price-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-lg); background: #fff; display: flex; flex-direction: column; } .price-card.featured { border-color: var(--brand); } .price-card .amt { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); font-feature-settings: "tnum" 1; } .price-card ul { margin: var(--s-md) 0; display: grid; gap: .5rem; } .price-card li { display: flex; gap: .5rem; font-size: var(--small); color: var(--ink-soft); } .price-card li i { color: var(--brand); flex: none; margin-top: .15rem; } /* --- Footer --- */ .mk-footer { background: var(--ink); color: rgba(255,255,255,.6); padding: var(--s-3xl) 0 var(--s-lg); } .mk-footer h3, .mk-footer h2 { color: #fff; font-size: var(--small); margin-bottom: var(--s-md); font-weight: 600; } /* Verkleinert 17.08.2026 (Owner: "Text im Footer viel zu gross"). 13 px statt 14 px: der Fuss ist Navigation zweiter Ordnung, nicht Fliesstext. Kontrast bleibt durch die hoehere Deckkraft erhalten - kleiner UND blasser waere schlecht lesbar. */ .mk-footer a { color: rgba(255,255,255,.68); font-size: 0.8125rem; } .mk-footer h3, .mk-footer h2 { font-size: 0.8125rem; letter-spacing: .02em; line-height: 1.4; font-family: var(--font); } .mk-footer ul { gap: .4rem; } .mk-footer a:hover { color: #fff; } /* ★ 13.10.2026: Die Spurenzahl folgt der WIRKLICHEN Zahl der Spalten. footer.php gibt sie als --mk-fuss-spuren mit (Logospalte + gefuellte Spalten). Vorher standen hier feste Spuren; faellt eine Spalte weg — wie „Unternehmen", deren Ziele alle noch nicht freigeschaltet sind —, blieb rechts eine leere Spur stehen. Der Rueckfallwert 5 entspricht dem bisherigen Verhalten. */ .mk-footer .cols { display: grid; gap: var(--s-lg); grid-template-columns: 1.4fr repeat(calc(var(--mk-fuss-spuren, 5) - 1), 1fr); } /* 13.10.2026 — das Fusszeilen-Logo stand nicht buendig mit "Produkte / Unternehmen / Ressourcen" (Owner). Ursache: .mk-logo traegt min-height:44px mit align-items:center (Trefferflaeche WCAG 2.5.8, 18.08.2026). Das 24 px hohe Bild wurde darin mittig gesetzt und lag damit 10 px unter der Kastenoberkante der Ueberschriften. Die Trefferflaeche DARF NICHT weg. Stattdessen oben ausrichten und um genau den Betrag einruecken, den die Ueberschrift selbst ueber ihrer Versalhoehe frei laesst: halber Durchschuss + (Schrift-Oberlaenge - Versalhoehe). Im Browser gemessen (13.10.2026, Inter 600): 1,16 px + 3,00 px = 4,16 px bei 15,44 px Schriftgrad = 0,27em. Danach Restversatz 0,00 px, Trefferflaeche weiterhin 44 px. In em, damit es dem Schriftgrad folgt. NUR in der Fusszeile — im Kopf steht das Logo allein und braucht das nicht. */ .mk-footer .mk-logo { align-items: flex-start; padding-top: 0.27em; } .mk-footer ul { display: grid; gap: .25rem; } /* 18.08.2026: Trefferflaeche der Fusszeilen-Links (WCAG 2.5.8, 24 px): Polster statt Zeilenabstand, die Liste bleibt optisch gleich dicht. Gilt auch fuer den Cookie-Knopf. */ .mk-footer ul a, .mk-footer ul .mk-cookie-btn { display: inline-block; padding: .3rem 0; line-height: 1.3; } .mk-footer .legal { margin-top: var(--s-2xl); padding-top: var(--s-md); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--tiny); color: rgba(255,255,255,.62); display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; } .mk-footer-login { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-md); padding: .5rem .9rem; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-btn); color: #fff; font-size: var(--small); font-weight: 500; transition: background .15s ease, border-color .15s ease; } .mk-footer-login:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff; } /* --- Consent-Banner --- */ .consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 24px rgba(11,20,55,.08); padding: var(--s-md) 0; transform: translateY(110%); visibility: hidden; transition: transform .35s ease, visibility .35s; } .consent-banner.is-visible { transform: none; visibility: visible; } .consent-banner .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-md); } .consent-banner p { font-size: var(--small); color: var(--ink-soft); margin: 0; max-width: 640px; } .consent-banner .opts { display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; } .consent-banner label { font-size: var(--small); color: var(--ink-soft); display: inline-flex; gap: .35rem; align-items: center; } .consent-banner .btns { display: flex; gap: .6rem; } /* Gleichwertigkeit (EDSA 03/2022): "Alle ablehnen" und "Alle annehmen" teilen sich Groesse, Farbe und Gewicht. Keine der beiden darf optisch die naheliegende sein. */ .consent-banner .btns .btn { min-width: 11.5rem; justify-content: center; } .consent-banner .consent-h { font-weight: 600; color: var(--ink); font-size: var(--body); margin-bottom: .3rem; } /* Die granulare Auswahl ist bewusst KEIN dritter gleichrangiger Knopf - sie ist ein eigener Weg, nicht die Gegenoption zum Ablehnen. Als Textknopf mit klarer Trefferflaeche (44 px) bleibt sie gut erreichbar, ohne die Waage zu kippen. */ .consent-banner .consent-auswahl { background: none; border: 0; padding: .5rem .2rem; min-height: 44px; font: inherit; font-size: var(--small); color: var(--ink-soft); text-decoration: underline; cursor: pointer; } .consent-banner .consent-auswahl:hover { color: var(--ink); } .consent-banner label > span { display: inline-flex; flex-direction: column; line-height: 1.3; } .consent-banner label .z { font-size: var(--tiny); color: var(--ink-mute); } .consent-banner label { align-items: flex-start; min-height: 44px; padding-block: .25rem; } @media (max-width: 700px) { .consent-banner .btns { width: 100%; } .consent-banner .btns .btn { flex: 1 1 0; min-width: 0; } } /* --- Reveal-Animation --- */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* Tab-Frame: sanfter Wechsel statt hartem Umschalten */ .frame-body.tab-enter { animation: pdTabFade .24s cubic-bezier(.16,1,.3,1) both; } @keyframes pdTabFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* Hero: gestaffelte Einblendung beim Laden (einmalig) */ .hero-brand { margin-bottom: 1.1rem; } /* 130 px klingen viel, sind aber nur ~52 px sichtbares Logo: die Lockups belegen 188 von 472 viewBox-Einheiten, der Rest ist Rand oben/unten (der die vier Marken auf gleiche optische Groesse normiert). Der Faktor ist 0,4 — wer hier eine Zahl aendert, muss ihn mitrechnen. */ /* Wortmarke im Hero. 130 px waren der groesste Einzelposten der Hero-Innenhoehe — gemessen im Kopfbrowser lagen die vier Produktseiten dadurch 131 bis 265 px ueber den Hub-Seiten (833-967 px gegen 702 px bei 1440x900). Auf schmalen Schirmen galten ohnehin schon 84 px; dieselbe Groesse gilt jetzt ueberall. */ .hero-brand svg, .hero-brand img { height: 84px; width: auto; display: block; } .hero--media .hero-brand { color: #fff; } /* Die weisse Wortmarke steht direkt auf dem Foto und ging je nach Bildausschnitt unter. Ein Kasten dahinter loeste das zwar, sah aber aufgeklebt aus (Owner, 16.08.2026) — er bringt eine harte Kante in eine Flaeche, die sonst nur weiche Verlaeufe hat. Stattdessen zwei gestaffelte Schatten DIREKT an der Kontur: der enge traegt auf hellen Bildstellen, der weite gibt Tiefe. Keine Kante, kein zusaetzliches Rechteck. */ .hero--media .hero-brand img, .hero--media .hero-brand svg { filter: drop-shadow(0 1px 2px rgba(4,8,18,.85)) drop-shadow(0 3px 10px rgba(4,8,18,.55)) drop-shadow(0 10px 30px rgba(4,8,18,.35)); } @media (max-width: 640px) { .hero-brand svg, .hero-brand img { height: 84px; } } .hero-in > * { opacity: 0; transform: translateY(14px); animation: pdHeroIn .6s cubic-bezier(.16,1,.3,1) forwards; } .hero-in > *:nth-child(1) { animation-delay: .04s; } .hero-in > *:nth-child(2) { animation-delay: .12s; } .hero-in > *:nth-child(3) { animation-delay: .20s; } .hero-in > *:nth-child(4) { animation-delay: .28s; } @keyframes pdHeroIn { to { opacity: 1; transform: none; } } /* feiner Akzent-Unterstrich, der beim Reveal einläuft (Overline) */ .reveal .overline::after { content: ''; display: block; width: 0; height: 2px; margin-top: .5rem; background: var(--brand); transition: width .6s cubic-bezier(.16,1,.3,1) .15s; } .reveal.in .overline::after { width: 28px; } /* --- Hero-Helfer --- */ .hero { padding: var(--s-3xl) 0 var(--s-section); } .hero h1 { margin-bottom: var(--s-md); } .hero .lead { margin-bottom: var(--s-lg); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); } .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); } /* --- Medien (Foto / Video — optional & graceful; erscheint nur, wenn Datei existiert) --- */ /* Ambient-Video-Hero (web4data): Video/Poster vollflächig, stark abgedunkelt; Text + Produkt-Frame schweben darüber */ .hero--media { position: relative; isolation: isolate; overflow: hidden; background-color: #0c1426; background-size: cover; background-position: center; } .hero--media > .container { position: relative; z-index: 2; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* ── Einheitliche Hero-Bildhoehe 16:9 (Owner, 17.08.2026) ───────────────────── Die Hero-Hoehe entstand bisher aus dem Innenabstand — und der war je nach Seitentyp verschieden: .hero (ueber-uns, vertrauen, Produktseiten) 5rem oben / 8rem unten = 13rem .rg-hero (blog, ratgeber) 6.5rem oben / 4rem unten = 10.5rem Da die Poster als `background-size: cover` liegen, schlug diese Differenz von 2.5rem direkt auf die sichtbare Bildhoehe durch: der Blog-Hero war flacher als der von ueber-uns. Alle neun Hero-Poster sind 1280x720, also 16:9. Genau dieses Verhaeltnis gibt die Hoehe jetzt vor — das Bild wird dadurch im vorgesehenen Ausschnitt gezeigt statt beliebig beschnitten. Die Hoehe kommt ueber `min-height`, nicht ueber `aspect-ratio` — Begruendung in der Regel selbst. */ .hero--media, .rg-hero--media { /* KORREKTUR 17.08.2026, nachgemessen: Die erste Fassung setzte `aspect-ratio: 16/9` zusammen mit `max-height: 78vh`. Beides erzeugt eine DEFINITE Hoehe — und weil `.hero--media` `overflow: hidden` traegt (siehe oben), lief der mittig gesetzte Inhalt oben und unten heraus und wurde abgeschnitten. Gemessen auf 1440x900: Logo 44px ab, Zeitachse 8px ab; auf 390x844 verschwand das Logo vollstaendig. `min-height` clippt nie: die Box waechst, sobald der Inhalt mehr Platz braucht. 56.25vw ist exakt 9/16 der Fensterbreite, also 16:9. clamp() haelt das Verhaeltnis zwischen einer Untergrenze (schmale Geraete) und 78vh (sonst fuellt der Hero den ganzen ersten Bildschirm). */ min-height: clamp(30rem, 56.25vw, 78vh); display: flex; align-items: center; } .hero--media > .container, .rg-hero--media > .container { width: 100%; } @media (max-width: 640px) { /* Auf schmalen Geraeten traegt 16:9 den Inhalt nicht — dort zaehlt nur die Untergrenze. (Die fruehere Fassung setzte hier `aspect-ratio: auto`, liess aber `max-height` stehen; der Hero wurde dadurch mobil auf 78vh gedeckelt und schnitt den Text ab.) */ .hero--media, .rg-hero--media { min-height: 24rem; } } .hero-media-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(10,16,32,.93) 0%, rgba(10,16,32,.80) 42%, rgba(10,16,32,.50) 100%); } /* Die Lasur ueber dem Hero-Foto folgt der TEXTANORDNUNG und traegt die Markenfarbe. Bis 15.08.2026 lag ueber allen fuenf Fotos derselbe blauschwarze Verlauf aus derselben Richtung — deshalb wirkten die Bilder austauschbar, obwohl es fuenf verschiedene sind. Ein seitlicher Verlauf ist bei ZENTRIERTEM Text ausserdem sachlich falsch: er dunkelt dort ab, wo nichts steht. Der Textbereich bleibt in jeder Variante bei mindestens .90 Deckkraft — die Lesbarkeit haengt nicht am Foto. */ .hero--l-panel .hero-media-scrim { background: linear-gradient(95deg, color-mix(in srgb, var(--brand) 32%, rgba(10,16,32,.97)) 0%, color-mix(in srgb, var(--brand) 24%, rgba(10,16,32,.88)) 45%, rgba(10,16,32,.62) 100%); } .hero--l-zentriert .hero-media-scrim { background: radial-gradient(ellipse 70% 90% at 50% 45%, color-mix(in srgb, var(--brand) 28%, rgba(10,16,32,.96)) 0%, color-mix(in srgb, var(--brand) 20%, rgba(10,16,32,.89)) 55%, rgba(10,16,32,.68) 100%); } .hero--l-band .hero-media-scrim { /* Zwei Textzonen: H1 bei ~28 % Hoehe, Ablaufband bei ~73 % (gemessen). Beide brauchen Dunkelheit, dazwischen darf das Foto durchkommen. */ background: linear-gradient(178deg, color-mix(in srgb, var(--brand) 32%, rgba(10,16,32,.96)) 0%, color-mix(in srgb, var(--brand) 26%, rgba(10,16,32,.92)) 30%, color-mix(in srgb, var(--brand) 16%, rgba(10,16,32,.72)) 52%, color-mix(in srgb, var(--brand) 32%, rgba(10,16,32,.95)) 100%); } .hero--l-achse .hero-media-scrim { background: linear-gradient(158deg, color-mix(in srgb, var(--brand) 36%, rgba(10,16,32,.97)) 0%, color-mix(in srgb, var(--brand) 22%, rgba(10,16,32,.90)) 50%, rgba(10,16,32,.70) 100%); } .hero--media .overline { color: color-mix(in srgb, var(--brand) 35%, #fff); } .hero--media h1 { color: #fff; } .hero--media .lead { color: rgba(255,255,255,.84); } .hero--media .btn-outline { color: #fff; border-color: rgba(255,255,255,.40); } .hero--media .btn-outline:hover { background: rgba(255,255,255,.10); color: #fff; } /* Abgedunkeltes Hintergrundbild in einer .section-dark (Rechenzentrum / Hosting DE) */ .section-dark.has-media { position: relative; isolation: isolate; overflow: hidden; } .section-dark.has-media > .container { position: relative; z-index: 2; } .section-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .20; } .section-dark.has-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,17,21,.55), rgba(15,17,21,.82)); } /* Dezente, themenpassende Hintergrund-Glyphen (je Produkt) */ .has-iconfield { position: relative; isolation: isolate; overflow: hidden; } .has-iconfield > .container { position: relative; z-index: 1; } .icon-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--brand); opacity: .05; } .icon-field i { position: absolute; line-height: 1; } @media (max-width: 700px) { .icon-field i:nth-child(n+4) { display: none; } } /* Redaktionelles Vollbreiten-Foto-Band (Produkt-Kontext) */ .media-band { position: relative; height: clamp(220px, 34vw, 380px); overflow: hidden; isolation: isolate; } .media-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .media-band-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,17,21,.62) 0%, rgba(15,17,21,.30) 55%, rgba(15,17,21,.10) 100%); } .media-band-cap { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--s-lg); } .media-band-cap .overline { color: color-mix(in srgb, var(--brand) 30%, #fff); } .media-band-cap p { color: #fff; font-size: var(--body-lg); max-width: 34ch; margin-top: .25rem; } /* Schnittstellen & Kompatibilität */ .integrations { display: grid; gap: var(--s-lg); margin-top: var(--s-lg); } .intg-tier-label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--small); font-weight: 600; margin-bottom: .75rem; } .intg-available { color: var(--ok); } .intg-prepared { color: var(--warnung); } .intg-planned { color: var(--ink-mute); } .intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: .75rem; } .intg-card { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-btn); padding: .85rem 1rem; } .intg-mark { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--brand-pill); color: var(--brand); } .intg-mark i { font-size: 1.2rem; } .intg-mark img { width: 28px; height: 28px; object-fit: contain; } .intg-name { font-weight: 600; font-size: var(--small); color: var(--ink); } .intg-desc { font-size: var(--tiny); color: var(--ink-mute); margin-top: .15rem; line-height: 1.45; } /* Sticky Sub-Nav-CTA: erst nach dem Hero einblenden (verhindert die doppelte CTA oben) */ .sub-nav .mk-subnav-cta { opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; } .sub-nav.cta-on .mk-subnav-cta { opacity: 1; visibility: visible; transform: none; } /* Keine CTA-Dopplung: Header-CTA weicht, sobald der Sub-Nav-CTA erscheint */ .mk-actions .btn { transition: opacity .2s ease, visibility .2s ease; } /* Header-CTA bleibt immer sichtbar (Owner-Feedback) */ /* --- Responsive --- */ @media (max-width: 900px) { :root { --s-section: 4.5rem; --s-3xl: 2.5rem; } .grid-7-5, .grid-5-7, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-xl); } .mk-footer .cols { grid-template-columns: 1fr 1fr; } .mk-burger { display: inline-grid; } /* grid, damit place-items greift */ /* Mobiles Navigations-Drawer: Burger oeffnet die volle Liste */ .mk-navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .4rem var(--gutter) 1rem; max-height: calc(100dvh - 80px); overflow-y: auto; } .mk-header[data-open="1"] .mk-navlinks { display: flex; } .mk-navlinks > a:not(.mk-mobile-cta) { padding: .95rem .2rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: var(--body); font-weight: 500; } .mk-switch { position: static; width: 100%; } .mk-switch > button { width: 100%; justify-content: space-between; padding: .95rem .2rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: var(--body); font-weight: 500; } .mk-menu { position: static; transform: none; opacity: 1; visibility: visible; display: none; width: auto; min-width: 0; max-width: none; box-shadow: none; border: 0; background: transparent; padding: .25rem 0 .5rem .6rem; grid-template-columns: 1fr; } .mk-switch[data-open="1"] .mk-menu { display: grid; } .mk-menu-item { padding: .6rem .4rem; } .mk-actions .btn { display: none; } .mk-mobile-cta { display: inline-flex !important; justify-content: center; margin-top: .9rem; } } @media (max-width: 560px) { .mk-footer .cols { grid-template-columns: 1fr; } .trustbar span { border-right: 0; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; } .hero-in > *, .frame-body.tab-enter { animation: none !important; opacity: 1 !important; transform: none !important; } .reveal .overline::after, .reveal.in .overline::after { display: none !important; } html { scroll-behavior: auto; } } /* ============ v8: Trust-Badges, Live-Ansicht/Showcase, Produktvideo, Lightbox, SEO-Block ============ */ .trust-badges { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; } .trust-badge { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--small); font-weight: 600; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .42rem .8rem; } .trust-badge i { color: var(--brand); font-size: 1.05em; } .trust-cert { height: 40px; width: auto; opacity: .92; } .section-dark .trust-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.86); } .section-dark .trust-badge i { color: color-mix(in srgb, var(--brand) 55%, #fff); } .trust-band { padding: var(--s-lg) 0 0; } /* Live-Ansicht / Showcase */ .showcase-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-lg); align-items: start; } .showcase-shot { margin: 0; } .showcase-shot .frame { box-shadow: 0 30px 60px -22px rgba(20,30,60,.40); } .showcase-shot figcaption { margin-top: .65rem; font-size: var(--small); color: var(--ink-mute); display: inline-flex; align-items: center; gap: .35rem; } .showcase-shot figcaption i { color: var(--brand); } .showcase-video { position: sticky; top: 90px; } @media (max-width: 900px) { .showcase-grid { grid-template-columns: 1fr; } .showcase-video { position: static; } } /* Produktvideo (echt) + ehrlicher Platzhalter */ .prodvideo { position: relative; border-radius: var(--r-shot); overflow: hidden; aspect-ratio: 16 / 10; background-color: #0c1426; background-size: cover; background-position: center; border: 1px solid var(--line); } .prodvideo-el { width: 100%; height: 100%; display: block; object-fit: cover; } .prodvideo--placeholder { display: flex; align-items: center; justify-content: center; } .prodvideo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,32,.42), rgba(10,16,32,.72)); z-index: 1; } .prodvideo-play { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,.32); transition: transform .2s; } .prodvideo--placeholder:hover .prodvideo-play { transform: scale(1.06); } .prodvideo-play i { font-size: 34px; color: var(--brand); margin-left: 3px; } .prodvideo-note { position: absolute; z-index: 2; bottom: .85rem; left: .85rem; font-size: var(--tiny); font-weight: 600; color: #fff; background: rgba(0,0,0,.42); border-radius: 999px; padding: .32rem .7rem; display: inline-flex; gap: .35rem; align-items: center; } .prodvideo-cap { margin-top: .55rem; font-size: var(--small); color: var(--ink-mute); } /* SEO-Content-Block */ .seo-block { max-width: 80ch; margin: 0 auto var(--s-xl); } .seo-block h2, .seo-block h3 { margin: .35rem 0 .75rem; } .seo-prose { color: var(--ink-soft); line-height: 1.7; font-size: var(--body); } .seo-prose p { margin-bottom: .9rem; } .seo-prose ul { margin: .5rem 0 1rem; padding-left: 1.1rem; } .seo-prose li { margin-bottom: .4rem; color: var(--ink-soft); } .seo-prose strong { color: var(--ink); } /* Lightbox */ .mk-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8,12,22,.93); display: none; align-items: center; justify-content: center; padding: 3vw; cursor: zoom-out; } .mk-lightbox.open { display: flex; } .mk-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.55); } .mk-lightbox-close { position: fixed; top: 16px; right: 22px; font-size: 40px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; } [data-zoomable] img { cursor: zoom-in; } /* Skip-Link (A11y): erst bei Fokus sichtbar */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; outline: 2px solid #fff; outline-offset: -4px; } /* Wechsel-/Datenhoheit-Block */ .switch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); margin-top: var(--s-lg); } .switch-card { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-shot); padding: 1.1rem; } .switch-card i { color: var(--brand); font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .switch-card .t { font-weight: 600; color: var(--ink); } .switch-card .d { font-size: var(--small); color: var(--ink-mute); margin-top: .25rem; line-height: 1.5; } @media (max-width: 860px) { .switch-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .switch-grid { grid-template-columns: 1fr; } } /* A11y: In-Text-Links unterscheidbar ohne Farbe (WCAG link-in-text-block) */ .consent a, .consent-banner a, .consent-banner p a, .mk-footer .legal a, .form-note a, .seo-prose a { text-decoration: underline; } /* ============================================================================ Ratgeber (Content-Hub /ratgeber + Artikel /ratgeber/) — CSS v9 ============================================================================ */ /* Hero (branded gradient, Text-LCP — kein Bild) */ .rg-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #000) 0%, var(--brand) 100%); color:#fff; padding: calc(var(--s-2xl) + 2.5rem) 0 var(--s-2xl); } .rg-hero .overline { color: color-mix(in srgb, var(--brand-fg, #fff) 75%, transparent); } .rg-hero h1 { color:#fff; max-width: 18ch; margin:.4rem 0 var(--s-md); } .rg-hero-hub h1 { max-width: 22ch; } .rg-lead { color: rgba(255,255,255,.95); font-size: var(--body-lg); max-width: 60ch; line-height:1.55; } .rg-breadcrumb { font-size: var(--small); color: rgba(255,255,255,.88); margin-bottom: var(--s-md); display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; } .rg-breadcrumb a { color: rgba(255,255,255,.95); text-decoration: underline; } .rg-breadcrumb a:hover { color:#fff; } .rg-breadcrumb i { opacity:.6; } .rg-meta { display:flex; gap:var(--s-md); flex-wrap:wrap; margin-top:var(--s-lg); font-size:var(--small); color: rgba(255,255,255,.92); } .rg-meta span { display:inline-flex; align-items:center; gap:.4rem; } /* Artikel-Körper (lesefreundliche Spaltenbreite) */ .rg-body { max-width: var(--max-w-text); padding-top: var(--s-2xl); padding-bottom: var(--s-2xl); } .rg-intro .seo-prose, .rg-intro { font-size: var(--body-lg); color: var(--ink-soft); } .rg-intro p { margin: 0 0 var(--s-md); line-height: 1.7; } .rg-body .seo-block { margin-bottom: var(--s-xl); } .rg-body .seo-block h2 { font-size: var(--h3); scroll-margin-top: 90px; } .rg-body .seo-prose { color: var(--ink-soft); line-height: 1.75; } .rg-body .seo-prose p { margin: 0 0 var(--s-sm); } .rg-body .seo-prose ul { margin: var(--s-sm) 0; padding-left: 1.25rem; } .rg-body .seo-prose li { margin: .35rem 0; line-height:1.6; } .rg-body .seo-prose strong { color: var(--ink); } .rg-disclaimer { font-size: var(--small); color: var(--ink-faint); border-left: 3px solid var(--line); padding: .5rem 0 .5rem var(--s-md); margin: var(--s-xl) 0; font-style: italic; } /* Bezogenes Produkt */ .rg-related { display:flex; gap:var(--s-lg); align-items:center; background: var(--stone-50); border:1px solid var(--line); border-radius: var(--r-card); padding: var(--s-lg); margin: var(--s-xl) 0; border-top:3px solid var(--brand); } .rg-related-mark .sq-lg { flex:0 0 auto; } .rg-related-body h3 { margin:.15rem 0 .35rem; } .rg-related-body p { color: var(--ink-soft); margin:0 0 var(--s-md); } .rg-related-body .overline { color: var(--brand); } /* Weitere Ratgeber */ .rg-more { margin-top: var(--s-2xl); border-top:1px solid var(--line); padding-top: var(--s-xl); } .rg-more > h2 { font-size: var(--h3); margin-bottom: var(--s-md); } .rg-more-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-md); } .rg-more-card { display:flex; flex-direction:column; gap:.5rem; padding: var(--s-md); border:1px solid var(--line); border-radius: var(--r-card); background:#fff; transition: border-color .15s, transform .15s; } .rg-more-card:hover { border-color: var(--brand); transform: translateY(-2px); } .rg-more-card .overline { font-size: var(--tiny); color: var(--ink-faint); } .rg-more-title { font-weight:600; color: var(--ink); line-height:1.35; font-size: var(--small); } .rg-more-link { margin-top:auto; color: var(--brand); font-size: var(--small); font-weight:600; display:inline-flex; align-items:center; gap:.3rem; } /* Hub-Grid */ .rg-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-lg); padding: var(--s-2xl) 0; } .rg-card { display:flex; flex-direction:column; gap:.65rem; padding: var(--s-lg); border:1px solid var(--line); border-radius: var(--r-card); background:#fff; box-shadow: var(--shadow-shot); transition: transform .15s, border-color .15s, box-shadow .15s; border-top:3px solid var(--brand); } .rg-card:hover { transform: translateY(-3px); border-color: var(--brand); } .rg-card h2 { font-size: var(--h4); line-height:1.3; color: var(--ink); margin:0; } .rg-card p { color: var(--ink-soft); font-size: var(--small); line-height:1.6; margin:0; } .rg-card-cat { display:inline-flex; align-items:center; gap:.45rem; font-size: var(--tiny); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--brand); } .rg-card-cat .dot { width:7px; height:7px; border-radius:50%; background: var(--brand); } .rg-card-foot { margin-top:auto; padding-top:.4rem; display:flex; justify-content:space-between; align-items:center; font-size: var(--small); color: var(--ink-faint); } .rg-card-link { color: var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:.3rem; } /* Hub-CTA-Band + Kontakt */ .rg-cta-band { display:flex; justify-content:space-between; align-items:center; gap: var(--s-lg); flex-wrap:wrap; background: var(--stone-50); border:1px solid var(--line); border-radius: var(--r-card); padding: var(--s-xl); } .rg-cta-band h2 { font-size: var(--h3); margin:0 0 .25rem; } .rg-cta-band p { color: var(--ink-soft); margin:0; } .rg-contact { padding: var(--s-2xl) 0; } .rg-leadwrap { max-width: var(--max-w-narrow); margin: var(--s-lg) auto 0; } @media (max-width: 900px) { .rg-grid, .rg-more-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .rg-grid, .rg-more-grid { grid-template-columns: 1fr; } .rg-related { flex-direction:column; align-items:flex-start; } } /* Ratgeber-Vergleichstabellen (CSS v10) — 3 Spalten, mobil horizontal scrollbar */ .rg-body .seo-prose table { width: 100%; border-collapse: collapse; margin: var(--s-md) 0; font-size: var(--small); } .rg-body .seo-prose th, .rg-body .seo-prose td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid var(--line); line-height: 1.5; } .rg-body .seo-prose thead th { background: var(--stone-50); color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--brand); } .rg-body .seo-prose tbody tr:hover { background: var(--stone-50); } .rg-body .seo-prose td:first-child { font-weight: 600; color: var(--ink); } .rg-body .seo-prose th:nth-child(2), .rg-body .seo-prose td:nth-child(2) { color: var(--brand); font-weight: 600; } @media (max-width: 640px) { .rg-body .seo-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; } } /* --- ClockData Shop (Preis-Rechner + Tarifkarten) --- */ .shop { margin-top: var(--s-lg); } .shop-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-lg); margin-bottom: var(--s-md); } .shop-seats-label { display: block; font-size: var(--small); font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; } /* 18.08.2026 — min-height: 44px ergaenzt. Die Hoehe kam bisher allein aus der Zeilenhoehe des ; im Kopfbrowser bei 390x844 gemessen waren die Plus/Minus-Knoepfe (.shop-step) dadurch nur 44x26 px und damit unter dem Mindest-Tippziel von 44 px (WCAG 2.5.8 / Apple HIG). Die gleichwertige Bedienung in der Kasse (/order-clockdata, .ord-seatctl) misst 42x46 px — der gemeinsame Preis-Baustein war also auch dazu uneinheitlich. 'align-items: stretch' gibt die Hoehe an Knoepfe UND Eingabefeld weiter. 46px statt 44px, weil der 1px-Rahmen oben und unten von der Innenhoehe abgeht: bei 44px kamen die Knoepfe selbst auf 42px und lagen damit weiterhin knapp darunter (nachgemessen, nicht gerechnet). */ .shop-seats { display: inline-flex; align-items: stretch; min-height: 46px; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; background: #fff; } .shop-seats input { width: 84px; text-align: center; border: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); -moz-appearance: textfield; } .shop-seats input::-webkit-outer-spin-button, .shop-seats input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .shop-step { width: 44px; border: 0; background: var(--stone-50); color: var(--ink); font-size: 1.25rem; cursor: pointer; line-height: 1; } .shop-step:hover { background: var(--stone-100); } .shop-cycle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; background: #fff; } .shop-cycle button { border: 0; background: none; padding: .7rem 1.1rem; font: inherit; font-size: var(--small); font-weight: 600; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; } .shop-cycle button.is-active { background: var(--brand); color: #fff; } .shop-save { font-size: var(--tiny); font-weight: 700; color: var(--ok); } .shop-cycle button.is-active .shop-save { color: #fff; } .shop-note { font-size: var(--small); color: var(--ink-mute); margin-bottom: var(--s-lg); } .shop-plans { align-items: stretch; } .price-card { position: relative; } .price-badge { display: inline-block; align-self: flex-start; font-size: var(--tiny); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 999px; padding: .2rem .6rem; margin-bottom: .5rem; } .price-tagline { color: var(--ink-mute); font-size: var(--small); margin-bottom: .5rem; } .shop-total { margin: .3rem 0 .8rem; padding: .7rem .9rem; background: var(--stone-50); border: 1px solid var(--line-soft); border-radius: var(--r-btn); font-size: var(--small); color: var(--ink-soft); } .shop-total strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); font-feature-settings: "tnum" 1; } .shop-gross { font-size: var(--tiny); color: var(--ink-mute); margin-top: .15rem; } .price-includes { font-size: var(--small); font-weight: 600; color: var(--ink-soft); margin: .2rem 0 .4rem; } .shop-trial { text-align: center; font-size: var(--small); color: var(--ink-mute); margin-top: var(--s-lg); } /* --- Mobile-Haertung: Frames scrollbar, Consent umbrechend, Klein-Phone-Gutter --- */ @media (max-width: 640px) { .frame-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .consent-banner .btns { flex-wrap: wrap; } .consent-banner .btns > * { flex: 1 1 auto; text-align: center; } .trustbar { flex-wrap: wrap; } } @media (max-width: 400px) { :root { --gutter: 1.1rem; } .shop-controls { gap: var(--s-md); } } .mk-cookie-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .mk-cookie-btn:hover { text-decoration: underline; } /* --- Blog-Inhalte aus der Datenbank --------------------------------------- blog.php rendert das HTML der Beitraege roh in diese Seite. Die Beitraege nutzen sechs Klassen; fuenf davon waren hier nicht definiert und rendern deshalb bisher ohne jede Auszeichnung — Tabellen ohne Rahmen, Quellen ohne Abhebung und, am schwersten, der Rechtshinweis nicht als solcher erkennbar. Bewusst an die Ratgeber-Entsprechungen angelehnt, damit Blog und Ratgeber gleich aussehen. */ .blog-table { overflow-x: auto; margin: var(--s-lg) 0; } .blog-table table { width: 100%; border-collapse: collapse; font-size: var(--small); } .blog-table th, .blog-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); } .blog-table th { color: var(--ink); font-weight: 600; border-bottom-width: 2px; } .blog-table tr:last-child td { border-bottom: 0; } .blog-figure { margin: var(--s-lg) 0; } .blog-figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-btn); } .blog-figure figcaption { margin-top: var(--s-xs); font-size: var(--small); color: var(--ink-mute); } .blog-check { list-style: none; padding-left: 0; margin: var(--s-md) 0; } .blog-check li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; } .blog-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand); font-weight: 700; } .blog-sources { margin: var(--s-lg) 0 0; padding: var(--s-md); background: #F8FAFC; /* kein Token dafuer vorhanden; --ink-mute darauf = 4,55:1 */ border-radius: var(--r-btn); font-size: var(--small); color: var(--ink-mute); } .blog-sources li { margin-bottom: .35rem; } .blog-sources li:last-child { margin-bottom: 0; } .blog-disclaimer { font-size: var(--small); color: var(--ink-mute); border-left: 3px solid var(--line); padding: .5rem 0 .5rem var(--s-md); margin: var(--s-lg) 0 0; } /* --- Informationsdesign-Panels (ersetzen Fake-Mockups) --- */ .feature-panel { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-card); background: var(--stone-50); padding: 1.5rem 1.6rem; } .feature-panel-eyebrow { display: block; font-family: var(--font-display); font-size: var(--tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 1rem; } .feature-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .feature-facts li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--body); color: var(--ink); line-height: 1.5; } .feature-facts li i { color: var(--brand); font-size: 1.2rem; flex: none; margin-top: .05rem; } .feature-facts .chip { margin-left: auto; align-self: center; } .feature-text .overline { margin-bottom: var(--s-sm); } /* Hero-Panel: Kern-Ansichten + Compliance statt Fake-Browser (hell; auf Media-Hero glasig) */ .hero-panel { border: 1px solid var(--line); background: #fff; border-radius: var(--r-card); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-md); } .hero-panel-head { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: var(--tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); margin-bottom: 1.1rem; } .hero-panel-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); } .hero-panel-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; } .hero-panel-list li { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--ink); } .hero-panel-list li i { color: var(--brand); } .hero-panel-marks { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); } .hero-panel-grid { margin: 0 0 1rem; border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow-x: auto; } .hero-panel-grid .scaffold { font-size: var(--tiny); } .hero-panel-grid .scaffold th, .hero-panel-grid .scaffold td { padding: .5rem .8rem; } .hero-panel-grid .scaffold tr:last-child td { border-bottom: 0; } .hero-panel-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; } .hero-panel-tabs span { font-size: var(--tiny); font-weight: 600; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; } .hero-panel-tabs span.on { color: var(--brand); border-color: currentColor; background: var(--brand-pill); } .hero-panel-marks span { font-size: var(--tiny); font-weight: 600; color: var(--ink-soft); background: var(--stone-100); border: 1px solid var(--line); border-radius: 4px; padding: .2rem .5rem; } .hero--media .hero-panel { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; } .hero--media .hero-panel-head { color: rgba(255,255,255,.72); } .hero--media .hero-panel-dot { background: color-mix(in srgb, var(--brand) 55%, #fff); } .hero--media .hero-panel-list li { color: #fff; } .hero--media .hero-panel-list li i { color: color-mix(in srgb, var(--brand) 45%, #fff); } .hero--media .hero-panel-grid { border-color: rgba(255,255,255,.18); background: rgba(10,16,28,.35); } .hero--media .hero-panel-grid .scaffold th { color: rgba(255,255,255,.6); border-bottom-color: rgba(255,255,255,.22); } .hero--media .hero-panel-grid .scaffold td { color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.12); } .hero--media .hero-panel-grid .scaffold td.m { color: #fff; } .hero--media .hero-panel-grid .scaffold .pill { background: rgba(255,255,255,.92); color: var(--brand); } .hero--media .hero-panel-tabs span { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.28); } .hero--media .hero-panel-tabs span.on { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); } .hero--media .hero-panel-marks { border-top-color: rgba(255,255,255,.14); } .hero--media .hero-panel-marks span { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); } /* Portal text-forward */ .portal-block { max-width: var(--max-w-text); } .portal-facts { list-style: none; margin: var(--s-md) 0 0; padding: 0; display: grid; gap: .9rem; } @media (min-width: 620px) { .portal-facts { grid-template-columns: 1fr 1fr; } } .portal-facts li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink); } .portal-facts li i { color: var(--brand); margin-top: .1rem; flex: none; } /* ===== Standards-/Schnittstellen-Karussell (Marquee) ===== */ .mk-marquee-sec { padding: var(--s-xl) 0; border-bottom: 1px solid var(--line-soft); } .mk-marq-eyebrow { font-family: var(--font-display); font-size: var(--tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 1.1rem; } .mk-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .mk-marquee-track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: mkMarquee 34s linear infinite; } .mk-marquee:hover .mk-marquee-track { animation-play-state: paused; } .mk-marq-item { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink-mute); white-space: nowrap; letter-spacing: -.01em; } .mk-marq-item::before { content: '—'; margin-right: 3rem; color: var(--line); } @keyframes mkMarquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mk-marquee { -webkit-mask-image: none; mask-image: none; } .mk-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; } .mk-marq-item::before { display: none; } } /* ===== Ausstieg (Export, Uebergabefrist) — im Umstiegs-Abschnitt ===== */ .aus-block { margin-top: var(--s-xl); padding-top: var(--s-lg); border-top: 1px solid var(--line); } .aus-grid { display: grid; gap: var(--s-md); grid-template-columns: 1fr; margin-top: .9rem; } @media (min-width: 760px) { .aus-grid { grid-template-columns: repeat(3, 1fr); } } .aus-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-md); } .aus-card i { color: var(--brand); font-size: 1.3rem; display: block; margin-bottom: .55rem; } .aus-card .t { font-weight: 600; color: var(--ink); font-size: var(--small); margin-bottom: .35rem; } .aus-card .d { color: var(--ink-soft); font-size: var(--small); line-height: 1.55; max-width: 46ch; } /* ===== Import-Ablauf im Umstiegs-Abschnitt ===== */ .imp-block { margin-top: var(--s-xl); } .imp-schritte { list-style: none; padding: 0; margin: .9rem 0 1.2rem; display: grid; gap: .55rem; counter-reset: imp; } .imp-schritte li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .9rem; align-items: baseline; padding: .85rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); } .imp-n { font-family: var(--font-mono); font-size: var(--tiny); color: var(--brand); font-weight: 700; grid-row: span 2; } .imp-t { font-weight: 600; color: var(--ink); font-size: var(--small); } .imp-d { grid-column: 2; color: var(--ink-soft); font-size: var(--small); line-height: 1.55; max-width: 62ch; } @media (max-width: 640px) { .imp-schritte li { grid-template-columns: 1fr; } .imp-n { grid-row: auto; } .imp-d { grid-column: 1; } } /* ===== Plattform-Block (Prozess- und Vorlagenbaukasten, alle vier Produktseiten) ===== */ .pf-grid { display: grid; gap: var(--s-md); grid-template-columns: 1fr; margin-top: var(--s-lg); } @media (min-width: 760px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } } .pf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-md); } .pf-card i { color: var(--brand); font-size: 1.4rem; display: block; margin-bottom: .6rem; } .pf-card h3 { font-size: 1.15rem; margin: 0 0 .5rem; } .pf-card p { color: var(--ink-soft); font-size: var(--small); line-height: 1.6; margin: 0; max-width: 60ch; } .pf-card strong { color: var(--ink); } .pf-fach { margin-top: var(--s-lg); } .pf-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .7rem 0 1rem; } .pf-chips li { font-family: var(--font-mono); font-size: var(--tiny); color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; } /* ===== Plattform-Familie (Cross-Produkt-Karten) ===== */ .fam-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: var(--s-lg); } /* Feste Dreierteilung liess die letzte Reihe angebrochen: vier Marken ergeben 3 + 1, die letzte Reihe steht zu zwei Dritteln leer. auto-fit verteilt sie ueber die verfuegbare Breite, ohne Luecke am Ende. */ @media (min-width: 720px) { .fam-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } } .fam-card { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .fam-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); } .fam-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; } .fam-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; } .fam-blurb { font-size: var(--small); color: var(--ink-mute); } .fam-card > i { color: var(--ink-faint); transition: transform .2s ease, color .2s ease; } .fam-card:hover > i { color: var(--brand); transform: translateX(3px); } .fam-all { margin-top: var(--s-lg); } /* ===== Footer: Ressourcen-Spalte (5 Spalten) ===== */ @media (min-width: 900px) { .mk-footer .cols { grid-template-columns: 1.4fr repeat(calc(var(--mk-fuss-spuren, 5) - 1), 1fr); } } /* ===== Skalierung fuer breite/hochaufloesende Screens (verhindert "verlorenen" Content) ===== Container duerfen mitwachsen — Textspalten NICHT im gleichen Verhaeltnis. Eine breitere Zeile ist nicht besser lesbar, sie zwingt das Auge nur zu weiteren Ruecksprungen. Massgeblich sind Zeichen pro Zeile (Ziel 80-85, Schmerzgrenze 90), nicht Pixel: Basis 720px / 17.0px = ~85 Zeichen ab 1600 720px / 17.0px = ~85 (vorher 800px = 94 — zu lang) ab 2000 790px / 18.6px = ~85 (vorher 860px = 92) ab 2560 870px / 20.6px = ~84 (vorher 920px = 89) Die Textbreite waechst also nur so weit mit, wie die Schrift mitwaechst. */ @media (min-width: 1600px) { :root { --max-w: 1360px; --max-w-narrow: 1040px; --max-w-text: 720px; } } @media (min-width: 2000px) { html { font-size: 17.5px; } :root { --max-w: 1520px; --max-w-narrow: 1160px; --max-w-text: 790px; } } @media (min-width: 2560px) { html { font-size: 19px; } :root { --max-w: 1680px; --max-w-narrow: 1280px; --max-w-text: 870px; } } /* ===== Cookie-Einstellungen-Button: als schlichter Footer-Link statt Browser-Button ===== */ .mk-cookie-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 0.8125rem; color: rgba(255,255,255,.68); cursor: pointer; text-align: left; } /* 18.08.2026: font:inherit zog 1rem statt der 0.8125rem der Nachbarlinks, der Knopf stand groesser als die Liste */ .mk-cookie-btn:hover { color: #fff; text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ FEINSCHLIFF — 14.08.2026 Die Details, an denen sich eine Enterprise-Seite von einer Vorlage unterscheidet. Gemessen, nicht geraten: vorher 0 Vorkommen von :focus-visible, text-wrap, ::selection, hyphens und @media print. ══════════════════════════════════════════════════════════════════════════ */ /* --- 1. Tastaturbedienung ------------------------------------------------ :focus zeigt den Ring auch beim Mausklick - das stoert und sieht nach Rohbau aus. :focus-visible zeigt ihn NUR, wenn er gebraucht wird. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; } /* Maus- und Tippbedienung bekommen keinen Ring - dort zeigt :hover/:active an. */ :where(a, button, summary):focus:not(:focus-visible) { outline: none; } /* --- 2. Rueckmeldung beim Klicken --------------------------------------- Ohne :active fuehlt sich ein Knopf tot an. 1px genuegt, mehr wirkt billig. */ .btn:active { transform: translateY(1px); } .product-card:active, .fam-card:active, .intg-card:active { transform: translateY(0); } /* --- 3. Zeilenlaenge ----------------------------------------------------- Gemessen: im Mittel 92 Zeichen, 24 Absaetze ueber 85. Lesbar sind 60-75. ch rechnet in Zeichenbreiten, passt sich also der Schriftgroesse an. */ .lead { max-width: 58ch; } .seo-prose p, .seo-prose li { max-width: 66ch; } .feature-panel p, .feature-text p, .switch-card .d, .intg-desc, .fam-blurb { max-width: 58ch; } .form-note, .kpi-source, .beleg p { max-width: 66ch; } /* Auffangregel: Fliesstext im Hauptinhalt, der keine eigene Begrenzung hat. Ausgenommen sind Elemente, die absichtlich die volle Breite brauchen. */ main p:not([class]):not(.hero *):not(td p):not(.price-card p) { max-width: 66ch; } /* --- 4. Umbruch von Ueberschriften und Absaetzen ------------------------- balance verteilt die Zeilen einer Ueberschrift gleichmaessig, statt ein einzelnes Wort in die letzte Zeile zu haengen. pretty verhindert Schusterjungen im Fliesstext. Beides faellt still zurueck, wo es fehlt. */ h1, h2, h3, .hero .lead, .section-head .lead { text-wrap: balance; } p, li, .seo-prose { text-wrap: pretty; } /* --- 5. Deutsche Langwoerter --------------------------------------------- "Auftragsverarbeitungsvertrag" reisst sonst Loecher in den Flattersatz. Nur im Fliesstext - Ueberschriften werden nie getrennt. */ .seo-prose, .lead, .feature-panel p, .rg-lead { hyphens: auto; -webkit-hyphens: auto; } h1, h2, h3, h4, .btn, .overline { hyphens: manual; -webkit-hyphens: manual; } /* Notbremse fuer Komposita ohne Trennstelle: 'Lueckenlosigkeitsnachweis' (24 Z.) passt in einer H1 bei 390px nicht in die Zeile. hyphens bleibt manual — automatische Trennung in Ueberschriften sieht schlecht aus —, aber break-word greift NUR, wenn das Wort sonst ueberliefe. Ohne Ueberlauf keine Wirkung. */ h1, h2, h3, h4 { overflow-wrap: break-word; } .tbl-wrap { overflow-x: auto; } /* --- Trefferflaechen (WCAG 2.5.8, 24x24 CSS-Px) --------------------------- Gemessen lagen Navigationslinks bei 23 px Hoehe, Footer-Links bei 17 und die Consent-Checkboxen bei 13. Behoben ueber vertikales Padding, nicht ueber feste Hoehen: die Zeilen bleiben optisch, wo sie waren, nur die Flaeche waechst. Ziele im Fliesstext sind laut Norm ausgenommen und deshalb nicht angefasst. */ .mk-navlinks > a, .mk-navlinks .mk-switch > button { padding-block: 5px; } footer a { display: inline-block; padding-block: 4px; } .consent-banner input[type="checkbox"], .mk-form input[type="checkbox"] { width: 18px; height: 18px; } .consent-banner label, .mk-form label { display: inline-flex; align-items: center; gap: .5rem; min-height: 24px; } /* --- 6. Textauswahl in der Markenfarbe ---------------------------------- Wer einen Absatz markiert, um ihn zu kopieren, sieht sonst Systemblau. */ ::selection { background: color-mix(in srgb, var(--brand) 22%, white); color: var(--ink); } /* --- 7. Drucken ---------------------------------------------------------- Kanzleien drucken. Ohne Druckstil kommen Navigation, Fusszeile und Videoflaechen mit aufs Papier, und Verweise verlieren ihr Ziel. */ @media print { .mk-nav, .sub-nav, .mk-footer, .consent-banner, .skip-link, .prodvideo, .media-band, .mk-marquee-sec, .rg-cta-band { display: none !important; } html { font-size: 11pt; } body { background: #fff; color: #000; } .container { max-width: none; padding: 0; } .hero { padding: 0 0 1.5rem; background: none !important; color: #000; } .hero h1, .hero .lead, .hero .overline { color: #000 !important; } .feature-panel, .price-card, .kpi-card, .product-card, .intg-card, .switch-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } h1, h2, h3 { break-after: avoid; } /* Ziel eines Verweises sichtbar machen - auf Papier ist ein Link sonst wertlos. */ main a[href^="http"]::after, main a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } main a[href^="#"]::after { content: ""; } } /* --- 8. Ankersprung unter der klebenden Kopfleiste ----------------------- Ohne scroll-margin verschwindet die angesprungene Ueberschrift hinter der Leiste. 88px Leiste + 24px Luft. */ :target, [id] { scroll-margin-top: calc(88px + 1.5rem); } /* --- 9. Bilder ohne Ruckeln --------------------------------------------- ENTFERNT 17.08.2026: Hier stand .media-band-img, .prodvideo-el { aspect-ratio: attr(width) / attr(height); } Die Regel war dreifach wirkungslos und ihre Begruendung falsch: 1. `attr()` ist ausserhalb von `content` nicht gueltig — Chromium berechnet `aspect-ratio: auto`, gemessen im Rendering. 2. `mk_media_band()` (components.php:170) gibt gar keine width/height-Attribute aus, auf die sich `attr()` beziehen koennte. 3. `.media-band-img` ist ohnehin `position:absolute; inset:0; width:100%; height:100%` in einem Band FESTER Hoehe `clamp(220px,34vw,380px)`. Ein Layoutsprung ist dort gar nicht moeglich — 380px gemessen bei 1440 wie bei 1920. Der Kommentar beschrieb also einen Schutz, den es weder gab noch braucht. */ img { max-width: 100%; height: auto; } /* ── PatData: Rechenspur und Nachweiszeile ──────────────────────────────── Die Seite zeigt, wie aus einer Frist ein Datum wird. Traegerelement ist die Rechenspur: je Zeile ein Schritt, seine Fundstelle und das Datum. Kein Sticky, kein JS — die Spur ist statisch, druckbar und wird von Suchmaschinen wie von Screenreadern als Tabelle gelesen. Werte stammen aus dem ausgelieferten Rechenweg (DeadlineCalculatorService). */ .pd-trail{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden} .pd-trail-head{padding:.75rem 1.1rem;border-bottom:1px solid var(--line); font-family:var(--font-mono);font-size:var(--tiny);letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint)} .pd-trail-step{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem; align-items:baseline;padding:.8rem 1.1rem;border-bottom:1px solid var(--line)} .pd-trail-step:last-child{border-bottom:0} .pd-trail-what{font-size:var(--small);color:var(--ink);line-height:1.35} .pd-trail-law{display:block;font-family:var(--font-mono);font-size:var(--tiny); color:var(--ink-faint);margin-top:.15rem} .pd-trail-date{font-family:var(--font-mono);font-size:var(--small);color:var(--ink-soft); white-space:nowrap;font-variant-numeric:tabular-nums} /* Der fuenfte Schritt ist nicht der naechste Rechenschritt, sondern das ERGEBNIS. Bis 16.08.2026 sah er aus wie die vier davor (gleiche Schriftgroesse, nur grau hinterlegt) — die Spur lief ins Leere statt auf ein Ziel zu. */ .pd-trail-step--final{background:var(--stone-50);border-top:2px solid var(--brand); align-items:center;padding-top:1rem;padding-bottom:1rem} .pd-trail-step--final .pd-trail-what{font-weight:600} .pd-trail-step--final .pd-trail-date{color:var(--brand);font-weight:700; font-size:1.7rem;line-height:1.05;letter-spacing:-.01em} .pd-trail-note{padding:.7rem 1.1rem;border-top:1px solid var(--line); font-size:var(--tiny);color:var(--ink-faint)} /* Nachweiszeile — ersetzt Badge-Pillen und Trustbar */ .pd-proofline{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-soft); line-height:1.7;max-width:none} .pd-proofline-sub{font-size:var(--tiny);color:var(--ink-faint);margin-top:.4rem;line-height:1.6; /* 7 der 8 Verwendungen setzten 66ch inline, eine war vergessen (patdata.php:139) und lief ueber die volle Containerbreite: 943 px bei 12 px Schrift. Als Standard hier, damit die Begrenzung nicht an jeder Fundstelle wiederholt werden muss. */ max-width:66ch} @media (max-width:640px){ .pd-trail-step{grid-template-columns:1fr} .pd-trail-date{margin-top:.2rem} .pd-trail-step--final .pd-trail-date{font-size:1.45rem;margin-top:.4rem} } /* Textlink auf dunkler Flaeche — .link-arrow ist fuer helle Flaechen gedacht und ergab im Hero 1,29:1. Auf dunklem Grund muss die Schrift hell sein. */ .hero .link-arrow, .hero-in .link-arrow{color:#E6ECF5} .hero .link-arrow:hover, .hero-in .link-arrow:hover{color:#fff} /* Regelwerk — der Beleg zur Leitidee: die tatsaechlich hinterlegten Fristregeln */ .pd-rules{width:100%;border-collapse:collapse;font-size:var(--small)} .pd-rules th{text-align:left;font-family:var(--font-mono);font-size:var(--tiny); letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint); font-weight:500;padding:.55rem .9rem;border-bottom:1px solid var(--line)} .pd-rules td{padding:.6rem .9rem;border-bottom:1px solid var(--line);color:var(--ink-soft)} .pd-rules td:first-child{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink)} .pd-rules td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums} .pd-rules tr:last-child td{border-bottom:0} .pd-rules-wrap{border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto;background:#fff} /* ── Signaturbild: zwei Amtskalender ────────────────────────────────────── DPMA und EPA sitzen beide in Muenchen, haben aber verschiedene Schliesstage. Kein Stilzitat, sondern ein Sachverhalt aus DEFAULT_HOLIDAYS. Statisch, druckbar, ohne JS, funktioniert in Schwarzweiss. */ .pd-cal-set{display:grid;grid-template-columns:1fr 1fr;gap:2rem} .pd-cal-head{font-family:var(--font-mono);font-size:var(--tiny);letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint);margin-bottom:.7rem} .pd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .pd-cal-wd{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint); text-align:center;padding-bottom:.3rem} .pd-cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:2px;border:1px solid var(--line);border-radius:4px; background:#fff;font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-soft)} .pd-cal-day--out{border-color:transparent;background:transparent;color:transparent} .pd-cal-marks{display:flex;gap:2px;height:4px} .pd-cal-mark{width:9px;height:4px;border-radius:1px;background:var(--line)} .pd-cal-mark--on{background:var(--ink)} .pd-cal-day--any{background:var(--stone-50);border-color:var(--ink-faint)} .pd-cal-legend{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem; font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint)} .pd-cal-legend span{display:inline-flex;align-items:center;gap:.4rem} .pd-cal-key{width:9px;height:4px;border-radius:1px;background:var(--ink);display:inline-block} @media (max-width:700px){.pd-cal-set{grid-template-columns:1fr;gap:2.4rem}} /* Kapitel-Oeffner: Ziffer statt Overline, Text einspaltig, rechte Spalte leer */ .pd-chapter{padding:6rem 0} .pd-num{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint); letter-spacing:.12em;margin-bottom:1rem} .pd-def{margin:1.6rem 0 0;max-width:66ch} .pd-def dt{font-weight:600;color:var(--ink);margin-top:1.1rem} .pd-def dd{margin:.25rem 0 0;color:var(--ink-soft);line-height:1.65} .pd-aside{margin-top:2.4rem;padding-left:1.2rem;border-left:3px solid var(--brand); max-width:62ch;color:var(--ink-soft);line-height:1.65} /* Bestaetigungsketten und Eskalationsleiter */ .pd-chain{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff} .pd-chain-row{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:.85rem 1.1rem; border-bottom:1px solid var(--line);align-items:baseline} .pd-chain-row:last-child{border-bottom:0} .pd-chain-class{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink)} .pd-chain-steps{font-size:var(--small);color:var(--ink-soft);line-height:1.5} .pd-chain-sep{color:var(--ink-faint);padding:0 .35rem} .pd-chain-meta{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint)} .pd-ladder{display:flex;flex-direction:column;gap:0;margin-top:1.5rem} .pd-rung{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center; padding:.9rem 0;border-top:1px solid rgba(255,255,255,.16)} .pd-rung:first-child{border-top:0} .pd-rung-lvl{font-family:var(--font-mono);font-size:var(--tiny);opacity:.7;min-width:4.5rem} .pd-rung-name{font-weight:600} .pd-rung-when{font-family:var(--font-mono);font-size:var(--small);font-variant-numeric:tabular-nums} .section-brand{background:var(--brand);color:#fff} .section-brand h2,.section-brand .lead{color:#fff} .section-brand .lead{opacity:.85} @media (max-width:640px){.pd-chain-row{grid-template-columns:1fr;gap:.3rem}} /* Zweispalter mit Hairline, Zustandskette, Merkposten */ .pd-split{display:grid;grid-template-columns:1fr 1px 1fr;gap:2rem;margin-top:1.6rem} .pd-split-line{background:var(--line)} .pd-split h3{font-size:var(--body);margin:0 0 .8rem;color:var(--ink)} .pd-states{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center; font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-soft)} .pd-states i{color:var(--ink-faint);font-style:normal} .pd-notes{margin:1.8rem 0 0;padding:0;list-style:none;max-width:66ch} .pd-notes li{padding-left:1.1rem;position:relative;margin-bottom:.7rem; color:var(--ink-soft);line-height:1.6} .pd-notes li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.7} @media (max-width:700px){.pd-split{grid-template-columns:1fr;gap:1.8rem}.pd-split-line{display:none}} /* ── Signaturbilder der drei uebrigen Produktseiten ─────────────────────── Je ein Sachverhalt aus dem Code, statisch, druckbar, ohne JS, funktioniert in Schwarzweiss. */ /* JuristData — Zustellwege auf einer Zeitachse: die Spanne ist das Bild */ .pd-scale{position:relative;margin:2rem 0 0;padding:2.6rem 0 3.2rem} .pd-scale-line{position:absolute;left:0;right:0;top:2.6rem;height:1px;background:var(--line)} .pd-scale-mark{position:absolute;top:0;transform:translateX(-50%);text-align:center} .pd-scale-dot{width:11px;height:11px;border-radius:50%;background:var(--ink);position:relative;z-index:1} .pd-scale-dot--soft{background:#fff;border:2px solid var(--ink-faint)} .pd-scale-name{font-size:var(--small);color:var(--ink);font-weight:600;line-height:1.25} .pd-scale-law{display:block;font-family:var(--font-mono);font-size:var(--tiny); color:var(--ink-faint);margin-top:.15rem} .pd-scale-day{position:absolute;top:3.5rem;left:50%;transform:translateX(-50%); font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-soft);white-space:nowrap} /* ClockData — vier Tore, jedes von einer anderen Person */ /* minmax(0,1fr) statt 1fr: sonst zwingt der laengste Text die Spalten auseinander. Gemessen bei 600px Layoutbreite: 132 / 149 / 161 / 165 px statt vier gleicher. */ .pd-gates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:2rem; border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff} .pd-gate{padding:1.2rem 1rem;border-right:1px solid var(--line);position:relative} .pd-gate:last-child{border-right:0} .pd-gate--done{background:var(--stone-50)} .pd-gate-key{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint)} .pd-gate-name{font-weight:600;color:var(--ink);margin:.3rem 0 .15rem} .pd-gate-who{font-size:var(--tiny);color:var(--ink-soft);line-height:1.4} .pd-gate-bar{height:3px;background:var(--line);margin-top:.9rem} .pd-gate--done .pd-gate-bar{background:var(--ink)} /* NotData — der Termin ist ein Punkt, der Vollzug eine Strecke */ .pd-span{margin-top:2rem;border:1px solid var(--line);border-radius:var(--r-card); background:#fff;padding:1.6rem 1.4rem} .pd-span-track{display:grid;grid-template-columns:2fr 1px 5fr;gap:0;align-items:stretch; margin:1.2rem 0 .6rem} .pd-span-seg{padding:.9rem 1rem} .pd-span-tick{background:var(--ink)} .pd-span-label{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint); text-transform:uppercase;letter-spacing:.06em} .pd-span-text{font-size:var(--small);color:var(--ink-soft);margin-top:.35rem;line-height:1.5} .pd-span-moment{text-align:center;padding:.9rem .4rem} .pd-span-moment .pd-span-label{color:var(--ink)} .pd-span-states{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem; font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-soft)} .pd-span-states i{color:var(--ink-faint);font-style:normal} .pd-span-states b{color:var(--ink)} @media (max-width:760px){ .pd-scale{padding-bottom:5rem} .pd-gates{grid-template-columns:1fr 1fr} .pd-gate{border-bottom:1px solid var(--line)} .pd-span-track{grid-template-columns:1fr;gap:1px} .pd-span-tick{height:1px} } /* Zeitachse: dicht stehende Marken versetzt, sonst ueberlappen die Beschriftungen. Gemessen bei 1200px Layoutbreite: beA (Tag 0) und Post (Tag 3) liegen nur 9 % auseinander, die Beschriftung ist aber 7 rem breit. Jede zweite wandert deshalb unter die Achse. Wichtig: Der Punkt bleibt IMMER auf der Linie — beim ersten Versuch mit display:flex ging die Zentrierung verloren und der Punkt driftete von seiner Beschriftung weg (im Bild sichtbar, in Messungen nicht). */ .pd-scale{padding-bottom:8rem} .pd-scale-mark{width:7rem;display:flex;flex-direction:column;align-items:center} .pd-scale-mark .pd-scale-name{order:1;text-align:center} .pd-scale-mark .pd-scale-dot{order:2;margin:.55rem 0 0} .pd-scale-mark .pd-scale-day{order:3;position:static;transform:none;margin-top:.45rem} /* versetzt: Punkt zuerst, Beschriftung darunter — Punkt bleibt auf der Linie */ .pd-scale-mark--low{padding-top:0} .pd-scale-mark--low .pd-scale-dot{order:1;margin:2.05rem 0 0} .pd-scale-mark--low .pd-scale-name{order:2;margin-top:.55rem} .pd-scale-mark--low .pd-scale-day{order:3} /* Zeitachse auf schmalen Geraeten: zentrierte Marken ragen aus dem Rahmen. Gemessen bei 390px: beA bei -1px (Rahmen beginnt bei 29), Post (Ausland) bei 408px (Rahmen endet bei 362). Deshalb hier NICHT zentriert, sondern linksbuendig ab der Tagesposition; nur die letzte Marke haengt an der rechten Kante. :first-of-type waere falsch — das erste div ist die Achsenlinie, nicht die erste Marke. */ @media (max-width: 760px){ .pd-scale-mark{width:6rem;transform:none;align-items:flex-start} .pd-scale-mark .pd-scale-name{text-align:left} .pd-scale-mark:last-child{left:auto!important;right:0;align-items:flex-end} .pd-scale-mark:last-child .pd-scale-name{text-align:right} } /* ── Signaturbild der Dachmarke: die Architektur der Produktfamilie ─────── Drei vertikale Fachprodukte je Berufsstand, darunter ein horizontales, das unter allen liegt. Quelle: web4data_brands.brand_type (vertical / horizontal / holding). Kein Produktblatt kann das zeigen — es ist genau das Argument, das nur der Dachmarke gehoert. */ .pd-arch{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden} .pd-arch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .pd-arch-cell{padding:1.3rem 1.2rem;border-right:1px solid var(--line)} .pd-arch-cell:last-child{border-right:0} .pd-arch-kind{font-family:var(--font-mono);font-size:var(--tiny);color:var(--ink-faint); letter-spacing:.06em;text-transform:uppercase} .pd-arch-name{font-weight:600;color:var(--ink);margin:.35rem 0 .2rem} .pd-arch-who{font-size:var(--small);color:var(--ink-soft);line-height:1.45} .pd-arch-base{border-top:1px solid var(--ink);padding:1.3rem 1.2rem;background:var(--stone-50)} .pd-arch-base .pd-arch-name{margin-top:.35rem} .pd-arch-note{padding:.85rem 1.2rem;border-top:1px solid var(--line); font-size:var(--tiny);color:var(--ink-faint)} @media (max-width:700px){ .pd-arch-row{grid-template-columns:1fr} .pd-arch-cell{border-right:0;border-bottom:1px solid var(--line)} } /* ── Hero-Architekturen ──────────────────────────────────────────────── Bis 15.08.2026 hatten alle vier Produktseiten denselben Hero: grid-7-5, Text links, Panel rechts. Der Text unterschied sie, das Layout nicht — das war die Hauptursache des Schablonen-Eindrucks. hero_layout in product_page.php waehlt jetzt die Architektur. */ .hero-solo { max-width: var(--max-w-narrow); } .hero-solo--zentriert { max-width: 820px; margin: 0 auto; text-align: center; } .hero-solo--zentriert .lead { margin-left: auto; margin-right: auto; } .hero-solo--zentriert .cta-row { justify-content: center; } .hero-solo--zentriert .hero-brand { display: flex; justify-content: center; } /* Anschluss unter dem Hero (17.08.2026). Der Faktenblock stand zuvor im Hero und trieb dessen Hoehe um 139-265 px ueber die der uebrigen Seiten. Er fuehrt den dunklen Grund weiter — `.pd-band`, `.pd-achse`, `.pd-reihe` schreiben durchgaengig in Weiss und waeren auf hellem Grund unlesbar. Der Verlauf beginnt in der Tonlage, in der die Hero-Lasur endet, damit die Kante nicht als Bruch sichtbar wird. */ /* Panel unter dem Hero (17.08.2026, siehe product_page.php). Heller Grund, weil das Panel selbst weiss ist. Breite begrenzt: ueber die volle Spaltenbreite wuerden die Zeilen des Ablaufs zu lang, im Hero stand es zuvor in 5 von 12 Spalten. */ .hero-panel-anschluss { background: var(--stone-50, #f8fafc); padding: var(--s-xl) 0; } .hero-panel-anschluss > .container > * { max-width: 46rem; margin-inline: auto; } .hero-anschluss { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, #0a1020) 0%, var(--ink) 100%); padding: var(--s-xl) 0; color: rgba(255,255,255,.78); } /* Im Hero brauchte der Block Abstand zum Text darueber; im eigenen Abschnitt traegt das Polster des Abschnitts. */ .hero-anschluss .hero-unten { margin-top: 0; } .hero-unten { margin-top: var(--s-xl); } /* band — Ablauf ueber die volle Breite, Stufen gleich breit */ .pd-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-card); overflow: hidden; } .pd-band > div { padding: var(--s-md) var(--s-sm); border-right: 1px solid rgba(255,255,255,.12); } .pd-band > div:last-child { border-right: 0; } .pd-band .n { font-family: var(--font-mono); font-size: var(--xs); color: rgba(255,255,255,.5); letter-spacing: .08em; } .pd-band .t { display: block; margin-top: .35rem; font-weight: 600; color: #fff; font-size: var(--body); } .pd-band .d { display: block; margin-top: .2rem; font-size: var(--small); color: rgba(255,255,255,.66); line-height: 1.5; } .pd-band > div:last-child { background: rgba(255,255,255,.06); } /* achse — waagerechte Zeitstrecke, Marken sitzen auf der Linie */ .pd-achse { position: relative; padding-top: var(--s-lg); } .pd-achse::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--s-lg) + 5px); height: 1px; background: rgba(255,255,255,.22); } .pd-achse-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-sm); position: relative; } .pd-achse-reihe > div { padding-top: var(--s-md); } .pd-achse-punkt { position: absolute; top: 0; width: 11px; height: 11px; border-radius: 999px; background: var(--brand); border: 2px solid #0c1426; } .pd-achse .l { display: block; font-family: var(--font-mono); font-size: var(--xs); color: rgba(255,255,255,.5); letter-spacing: .06em; } .pd-achse .t { display: block; margin-top: .3rem; font-weight: 600; color: #fff; font-size: var(--small); } .pd-achse .d { display: block; margin-top: .15rem; font-size: var(--tiny); color: rgba(255,255,255,.6); line-height: 1.45; } .pd-achse-reihe > div:last-child .pd-achse-punkt { background: #fff; } /* reihe — Belege nebeneinander unter zentriertem Text */ .pd-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-sm); } .pd-reihe > div { border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-card); padding: var(--s-md) var(--s-sm); text-align: left; } .pd-reihe .w { display: block; font-weight: 600; color: #fff; font-size: var(--small); } .pd-reihe .f { display: block; margin-top: .25rem; font-family: var(--font-mono); font-size: var(--xs); color: rgba(255,255,255,.55); } .pd-reihe .z { display: block; margin-top: .5rem; font-size: var(--body); color: #fff; font-weight: 600; } @media (max-width: 900px) { .pd-band, .pd-achse-reihe, .pd-reihe { grid-template-columns: 1fr; } .pd-band > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); } .pd-achse::before { display: none; } .pd-achse-punkt { display: none; } } /* ── Hero ohne Foto: ruhige Flaeche, Produkt gross ───────────────────── Belegt durch die Praxis der Referenzanbieter und durch Messungen: authentische Produktvisuals schlagen generische Stockfotos deutlich (Landingpages mit echten Bildern +48 % gegenueber Stock). Die Flaeche traegt die Markenfarbe als tiefer Verlauf plus ein feines Raster — ruhig genug, dass das Produktelement die Aufmerksamkeit bekommt. */ .hero--flaeche { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--brand) 42%, #0b1220) 0%, color-mix(in srgb, var(--brand) 16%, #0b1220) 46%, #0a0f1c 100%); } /* Feines Raster — gibt der Flaeche Tiefe, ohne vom Produkt abzulenken */ .hero--flaeche::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(130% 100% at 70% 0%, #000 25%, transparent 78%); } .hero--flaeche > .container { position: relative; z-index: 2; } .hero--flaeche h1 { color: #fff; } .hero--flaeche .lead { color: rgba(255,255,255,.84); } .hero--flaeche .overline { color: color-mix(in srgb, var(--brand) 35%, #fff); } .hero--flaeche .btn-outline { color: #fff; border-color: rgba(255,255,255,.40); } .hero--flaeche .btn-outline:hover { background: rgba(255,255,255,.10); } /* Produktelement dominanter: mehr Flaeche, klarere Kante, echter Schatten */ .hero--flaeche .hero-panel { padding: 1.9rem 2rem; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.97); box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25); } .hero--flaeche .pd-band, .hero--flaeche .pd-achse, .hero--flaeche .pd-reihe { margin-top: var(--s-lg); } .hero--flaeche .pd-band > div:last-child { background: rgba(255,255,255,.10); } /* ── Vertrauenssignale im Hero (above the fold) ──────────────────────── Schmale Zeile unter der Handlungsaufforderung. Bewusst zurueckhaltend: var(--small) in gedaempftem Weiss, Trennung durch einen feinen Punkt. Sie soll belegen, nicht mit der CTA konkurrieren. */ .hero-trust { list-style: none; margin: var(--s-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.15rem; } .hero-trust li { position: relative; font-size: var(--small); color: rgba(255,255,255,.72); letter-spacing: .005em; padding-left: 1rem; } .hero-trust li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 45%, #fff); } .hero-solo--zentriert .hero-trust { justify-content: center; } /* 19.10.2026: Der Link "Grenzen offen benannt" erbte die globale Linkfarbe (#581c87) und war auf dem dunklen Hero-Bild unsichtbar. Er nimmt jetzt die Zeilenfarbe an. */ .hero-trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } .hero-trust a:hover { color: #fff; text-decoration-color: currentColor; } @media (max-width: 700px) { .hero-trust { gap: .3rem .8rem; } .hero-trust li { font-size: var(--tiny); } } /* ── Hub-Hero mit Motiv (Blog, Ratgeber) ─────────────────────────────── Der Markenverlauf bleibt und liegt als Ebene UEBER dem Foto, statt von einem Hintergrundbild ersetzt zu werden. Deckkraft .88: das Motiv bleibt erkennbar, die Schrift steht weiterhin auf der Markenflaeche. */ .rg-hero--media { position: relative; isolation: isolate; background-size: cover; background-position: center; } /* Hub-Hero (Blog, Ratgeber). Bis 17.08. lag hier eine flache Deckkraft von .88 ueber dem ganzen Motiv — gemessen schlug das Foto damit nur zu 12 % durch, es war praktisch unsichtbar. Die Produktseiten loesen das seit 15.08. besser (siehe .hero-media-scrim): die Lasur folgt der Textanordnung. Der Text steht hier linksbuendig im Container, also deckt der Verlauf links fast vollstaendig und laesst rechts das Motiv durch. Gemessen: linke Zone weiss auf color-mix(brand 88%, #000) = 12,20:1 (AA fordert 4,5). */ .rg-hero--media::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(95deg, color-mix(in srgb, var(--brand) 88%, #000) 0%, var(--brand) 46%, color-mix(in srgb, var(--brand) 58%, transparent) 100%); } /* Schmale Schirme: der Container fuellt die volle Breite, der Text reicht damit bis in die aufgehellte rechte Zone (dort nur 4,17:1 gegen Weiss, AA fordert 4,5). Deshalb dort ein deutlich frueher schliessender Verlauf — das Motiv bleibt am aeussersten Rand sichtbar, der Textbereich nicht. */ @media (max-width: 900px) { .rg-hero--media::before { background: linear-gradient(95deg, color-mix(in srgb, var(--brand) 88%, #000) 0%, var(--brand) 72%, color-mix(in srgb, var(--brand) 82%, transparent) 100%); } } .rg-hero--media > .container { position: relative; z-index: 1; } /* ── Band echter Produktansichten (render_shot_band) ───────────────────────── 17.08.2026. Bewusst OHNE Fake-Browser-Rahmen: die Bilder sind echte Screenshots, sie brauchen keine Attrappe. Der duenne Rahmen und der weiche Schatten heben sie von der Flaeche ab, ohne ein Fenster vorzutaeuschen. `object-fit: cover` mit fester Verhaeltnisangabe haelt die Kacheln gleich hoch, auch wenn die Screenshots unterschiedliche Formate haben (2672x1888 bis 2672x1204). Die Bilder tragen width/height im HTML, der Platz ist also vor dem Laden reserviert. */ .shot-band { display: grid; gap: var(--s-md); margin: var(--s-lg) 0 var(--s-xl); grid-template-columns: 1fr; } @media (min-width: 720px) { .shot-band--2 { grid-template-columns: repeat(2, 1fr); } .shot-band--3 { grid-template-columns: repeat(3, 1fr); } } .shot { margin: 0; } .shot img { width: 100%; height: auto; /* 17.08.2026: Hier standen aspect-ratio 16/11 + object-fit:cover — die Screenshots (2672x1888 = 1,42:1) wurden dadurch auf 1,4545:1 beschnitten, unten fehlte ein Streifen. Produktansichten duerfen nicht angeschnitten werden: sie sind der Beleg, kein Dekorbild. Ohne aspect-ratio bestimmt das Bild seine Hoehe selbst; width/height stehen im Markup, es gibt also trotzdem keinen Layoutsprung. */ border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-md); background: #fff; display: block; } .shot figcaption { margin-top: .55rem; font-size: var(--small); color: var(--ink-soft); } /* Einzelne Ansicht: nicht ueber die volle Breite ziehen, sonst wirkt sie plakativ. */ /* Einzelne Ansicht: schmaler und mittig — sie steht ab 17.08. mitten in der Belegkette und wuerde linksbuendig wie ein Fehler wirken. */ .shot-band--1 { max-width: 52rem; margin-inline: auto; } /* Zusagen-Liste mit Symbolspalte. ueber-uns.php:138 nutzt die Klasse, die Regeln lagen aber nur im