/* ============================================================= solvento.pro – Website-Theme Dieselben Marken-Tokens (Navy/Grün, Poppins/Open Sans) und Material-Design-3-Rollen wie Admin-, Berater- und Mandantenportal (shared/theme/schuldner-insolvenzberatung-berlin). Wird auf der Startseite NACH dem Rechner-CSS geladen und überlagert nur dessen Optik – Logik und Markup des Rechners bleiben unverändert. Schriften liegen lokal: keine Anfrage an Google, kein Tracking. ============================================================= */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/opensans-variabel.woff2') format('woff2'); } :root { /* Marke (identisch mit tokens.css der Portale) */ --navy: #003265; --navy-deep: #002046; --navy-mid: #0a4a8c; --navy-light: #1060a8; --brand-green: #8cc63f; --brand-green-deep: #6ea82d; --brand-green-soft: #b1d96f; /* Material Design 3 – Farbrollen wie material.css der Portale */ --md-sys-color-primary: var(--navy); --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d6e3ff; --md-sys-color-on-primary-container: #001b3e; --md-sys-color-secondary-container: #dde4f3; --md-sys-color-on-secondary-container: #111c2b; --md-sys-color-tertiary: #4a7a1c; --md-sys-color-tertiary-container: #d5f0b0; --md-sys-color-on-tertiary-container: #142000; --md-sys-color-surface: #f9fafd; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f3f5fa; --md-sys-color-surface-container: #edf0f6; --md-sys-color-surface-container-high: #e7ebf2; --md-sys-color-on-surface: #1c2b3a; --md-sys-color-on-surface-variant: #46505e; --md-sys-color-outline: #747d8b; --md-sys-color-outline-variant: #c6ccd6; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 999px; --md-sys-elevation-level1: 0 1px 2px rgba(0, 32, 70, 0.20), 0 1px 3px 1px rgba(0, 32, 70, 0.10); --md-sys-elevation-level2: 0 1px 2px rgba(0, 32, 70, 0.20), 0 2px 6px 2px rgba(0, 32, 70, 0.10); --md-ext-elevation-karte: 0 1px 2px rgba(0, 32, 70, 0.06), 0 1px 4px rgba(0, 32, 70, 0.05); --md-ext-elevation-karte-hover: 0 2px 4px rgba(0, 32, 70, 0.08), 0 4px 12px rgba(0, 32, 70, 0.08); --md-ext-elevation-kopf: 0 1px 3px rgba(0, 32, 70, 0.06); --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /* Rechner-Variablen der Vorlage → Marke / M3 (Namen bleiben, Werte neu) */ --petrol: var(--navy); --petrol-deep: var(--navy-deep); --teal: var(--navy-light); --paper: #ffffff; --mist: var(--md-sys-color-surface-container-low); --ink: var(--md-sys-color-on-surface); --ink-soft: var(--md-sys-color-on-surface-variant); --line: #dde3ed; --amber: var(--brand-green); --amber-deep: var(--brand-green-deep); --green: var(--md-sys-color-tertiary); --green-soft: #eef7e2; --blue: var(--navy-light); --warm: #a64b1f; --warm-soft: #fbefe6; --shadow: var(--md-ext-elevation-karte-hover); --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-num: 'Poppins', system-ui, sans-serif; } /* ── Grundlagen ─────────────────────────────────────── */ body { font-family: var(--font-body); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); letter-spacing: -0.01em; } h1 { font-weight: 700; } h2 { font-weight: 600; } a { color: var(--navy-light); } :focus-visible { outline: 3px solid var(--brand-green); outline-offset: 2px; } .wrap { max-width: 1180px; padding: 0 24px; } .num { font-family: var(--font-num); font-weight: 600; } /* ── Kopfzeile ──────────────────────────────────────── */ header.site { background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--md-sys-color-outline-variant); box-shadow: var(--md-ext-elevation-kopf); } header.site .wrap { height: 72px; } footer.site .wrap { height: auto; display: block; } .brand { gap: 12px; } .brand-logo { height: 34px; width: auto; display: block; } .brand-tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border-left: 1px solid var(--md-sys-color-outline-variant); padding-left: 12px; line-height: 1.2; } nav.main { gap: 6px; } nav.main a { color: var(--navy); font-weight: 600; font-size: 0.93rem; padding: 0.5rem 0.85rem; border-radius: var(--md-sys-shape-corner-full); transition: background-color 0.2s var(--md-sys-motion-easing-standard); } nav.main a:hover { color: var(--navy); background: var(--md-sys-color-surface-container); } nav.main a.btn-cta, nav.main a.btn-cta:hover { color: var(--navy-deep); } nav.main a, .authbar { white-space: nowrap; } .authbar { gap: 6px; } @media (max-width: 1180px) { nav.main a.navlink[href*="#"] { display: none; } } @media (max-width: 420px) { .authbar .navlink { display: none; } } @media (max-width: 980px) { .brand-tag { display: none; } } @media (max-width: 760px) { header.site .wrap { height: 64px; } .brand-logo { height: 26px; } } /* ── Buttons (M3 Filled / Text) ─────────────────────── */ .btn { border-radius: var(--md-sys-shape-corner-full); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; transition: background-color 0.2s var(--md-sys-motion-easing-standard), box-shadow 0.2s var(--md-sys-motion-easing-standard), transform 0.2s var(--md-sys-motion-easing-standard); } .btn-cta { background: var(--brand-green); color: var(--navy-deep); box-shadow: none; padding: 0.75rem 1.5rem; } .btn-cta:hover { background: var(--brand-green-deep); color: var(--navy-deep); box-shadow: var(--md-sys-elevation-level1); transform: none; } .btn-cta:active { transform: none; box-shadow: none; } .btn-back { border-radius: var(--md-sys-shape-corner-full); color: var(--navy); } .btn-back:hover { background: var(--md-sys-color-surface-container); color: var(--navy); } .btn-skip { color: var(--navy-light); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--md-sys-color-outline); color: var(--navy); background: transparent; padding: 0.7rem 1.4rem; text-decoration: none; } .btn-outline:hover { background: var(--md-sys-color-surface-container); } /* ── Hero ───────────────────────────────────────────── */ .hero { background: radial-gradient(900px 420px at 88% -10%, rgba(140, 198, 63, 0.20), transparent 60%), radial-gradient(700px 380px at -10% 110%, rgba(16, 96, 168, 0.35), transparent 60%), linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%); padding: 72px 0 84px; } .hero h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.12; } .hero h1 em { color: var(--brand-green-soft); } .hero p.lede { color: #d9e4f2; font-size: 1.12rem; } .trust li { color: #d9e4f2; } .trust li::before { background: rgba(140, 198, 63, 0.22); color: var(--brand-green-soft); } .hero .privacy-note { color: #a9bdd6; } .hero-start { border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: 0 24px 60px rgba(0, 20, 50, 0.35); padding: 34px; } .hero-start h2 { font-size: 1.4rem; } .hero a { color: #ffffff; } .hero-start a { color: var(--navy-light); } .hero-start a.btn-cta { color: var(--navy-deep); } /* ── Abschnitte, Karten ─────────────────────────────── */ #wizard, #ergebnis, #alternative, #kosten, #nextsteps, #faq { background: var(--md-sys-color-surface-container-low); } .wiz-card, .reco, .ns-card, .alt-card, .alt-none, .cost-card, .qc-result, .lead-card, .modal { border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-ext-elevation-karte-hover); border: 1px solid var(--md-sys-color-outline-variant); } .reco, .qc-result { border-top-width: 6px; } .qc-card { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-extra-large); border: 1px solid var(--md-sys-color-outline-variant); } .kf { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-large); } .kf .kf-value { font-family: var(--font-num); color: var(--navy); } .kf.hi { background: var(--green-soft); } .eyebrow, .wiz-step .eyebrow, .reco .eyebrow, .qc-result .eyebrow, .alt-card .eyebrow, .ns-opt .tagline { color: var(--md-sys-color-tertiary); letter-spacing: 0.12em; } .meter { background: var(--md-sys-color-surface-container-high); border: 0; height: 8px; } .meter > span { background: linear-gradient(90deg, var(--navy-light), var(--brand-green)); } .wiz-progress .labels { color: var(--navy); } /* Eingaben: M3 „Outlined“ */ .field input[type=number], .field input[type=text], .field input[type=email], .field input[type=tel], .field select { background: #ffffff; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); font-family: var(--font-body); font-size: 1.05rem; transition: border-color 0.2s, box-shadow 0.2s; } .field input[type=number] { font-family: var(--font-num); font-weight: 500; } .field input:focus, .field select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0, 50, 101, 0.14); } .radio-row label { background: #ffffff; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); } .radio-row label:has(input:checked) { border-color: var(--navy); background: var(--md-sys-color-secondary-container); color: var(--navy); } .radio-row label:focus-within { outline-color: var(--brand-green); } .teaser { border-color: #cfe6b0; border-radius: var(--md-sys-shape-corner-large); } .reward { border-radius: var(--md-sys-shape-corner-large); } .consent input { accent-color: var(--navy); } /* Pro & Kontra, Hinweise, Kennzeichen */ .pk-col { border-radius: var(--md-sys-shape-corner-large); } .pk-pro { border-color: #cfe6b0; } .pk-con { border-color: #efd2bf; } .tips { background: var(--md-sys-color-surface-container-low); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); } .flag { border-radius: var(--md-sys-shape-corner-small); } .flag.neutral { background: var(--md-sys-color-secondary-container); color: var(--navy); } .lock-badge { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .qc-badge { border-radius: var(--md-sys-shape-corner-small); } .para-badges span { background: var(--md-sys-color-secondary-container); color: var(--navy); font-family: var(--font-body); font-weight: 600; } /* Zahlungsplan */ .tl { border-radius: var(--md-sys-shape-corner-small); border-color: var(--md-sys-color-outline-variant); } .tl .seg { color: var(--navy); } .tl .seg.prep { background: var(--md-sys-color-surface-container-high); } .tl .seg.pay0 { background: #f4faeb; } .tl .seg.loan { background: var(--md-sys-color-primary-container); color: var(--navy); } .tl .seg.free { background: #f4faeb; } .miles .dot { background: var(--navy-light); } .miles .dot.money { background: var(--brand-green-deep); } .plan-table th, .cost-table th { font-family: var(--font-display); color: var(--navy); } .plan-table td.n, .cost-table td.n { font-family: var(--font-num); } .plan-toggle summary { color: var(--navy-light); } .bar > span { background: var(--navy); } /* Nächste Schritte */ .ns-opt { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); background: #ffffff; transition: box-shadow 0.2s; } .ns-opt:hover { box-shadow: var(--md-ext-elevation-karte-hover); } .ns-opt.hi { border-color: var(--brand-green); background: var(--green-soft); } /* Fahrplan (dunkel) */ #fahrplan { background: radial-gradient(800px 360px at 90% 0%, rgba(140, 198, 63, 0.18), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--navy)); } #fahrplan p.lede { color: #d9e4f2; } .fahrplan-list .n { background: rgba(140, 198, 63, 0.22); color: var(--brand-green-soft); font-family: var(--font-display); } .fahrplan-list span { color: #b9cbe0; } .lead-summary { background: var(--md-sys-color-surface-container-low); border-radius: var(--md-sys-shape-corner-medium); } /* Video-Kacheln */ .video-ph { background: linear-gradient(150deg, var(--navy-deep), var(--navy-mid)); border-radius: var(--md-sys-shape-corner-large); overflow: hidden; box-shadow: var(--md-ext-elevation-karte); } .video-ph::before { background: rgba(255, 255, 255, 0.16); color: var(--brand-green); width: 52px; height: 52px; font-size: 1.1rem; } .video-ph .tag { background: var(--brand-green); color: var(--navy-deep); border-radius: var(--md-sys-shape-corner-small); } #videos { padding: 72px 0; background: var(--md-sys-color-surface-container-low); } /* Vertrauen, FAQ */ #vertrauen { padding: 72px 0; } .trust-card { background: #ffffff; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-ext-elevation-karte); padding: 26px; } #faq { padding: 72px 0; } .faq-item { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-ext-elevation-karte); } .faq-item summary { color: var(--navy); font-family: var(--font-display); font-weight: 600; } .faq-item summary::after { color: var(--navy-light); font-family: var(--font-display); } /* Abschnitts-Einleitung (neu) */ .section-head { max-width: 760px; margin-bottom: 8px; } .section-head .eyebrow { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; } .section-head p { color: var(--ink-soft); margin-top: 10px; font-size: 1.05rem; } /* ── Fußzeile ───────────────────────────────────────── */ footer.site { background: var(--navy-deep); color: #b9cbe0; padding: 56px 0 28px; font-size: 0.92rem; } footer .wrap.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } @media (max-width: 900px) { footer .wrap.footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { footer .wrap.footer-grid { grid-template-columns: 1fr; } } footer h4 { color: #ffffff; font-size: 0.95rem; margin-bottom: 12px; } footer a { color: #d9e4f2; text-decoration: none; } footer a:hover { color: #ffffff; text-decoration: underline; } footer ul { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; } .footer-logo { height: 30px; width: auto; display: block; margin-bottom: 14px; } footer address { font-style: normal; line-height: 1.6; margin-top: 10px; } footer .wrap.footer-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8rem; color: #8fa6c2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .sticky-cta { box-shadow: 0 -4px 16px rgba(0, 32, 70, 0.12); } /* ── Unterseiten (Ratgeber, Impressum, Datenschutz …) ── */ .page-hero { background: radial-gradient(800px 320px at 90% -20%, rgba(140, 198, 63, 0.18), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--navy)); color: #ffffff; padding: 56px 0 60px; } .page-hero h1 { color: #ffffff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 6px 0 12px; } .page-hero p { color: #d9e4f2; max-width: 46rem; font-size: 1.08rem; } .page-hero .eyebrow { color: var(--brand-green-soft); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .page-body { background: var(--md-sys-color-surface-container-low); padding: 48px 0 72px; } .page-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } @media (max-width: 900px) { .page-layout { grid-template-columns: 1fr; } .toc { position: static !important; } } .toc { position: sticky; top: 96px; background: #ffffff; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); padding: 18px; box-shadow: var(--md-ext-elevation-karte); } .toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin-bottom: 10px; } .toc ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.92rem; } .toc a { color: var(--navy); text-decoration: none; } .toc a:hover { text-decoration: underline; } .article { background: #ffffff; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-ext-elevation-karte); padding: 40px clamp(20px, 4vw, 48px); } .article.narrow { max-width: 860px; margin: 0 auto; } .article h2 { font-size: 1.45rem; margin: 36px 0 12px; scroll-margin-top: 96px; } .article h2:first-child { margin-top: 0; } .article h3 { font-size: 1.1rem; margin: 22px 0 8px; } .article p, .article li { color: var(--md-sys-color-on-surface); } .article p { margin: 0 0 12px; } .article ul, .article ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; } .article .muted { color: var(--ink-soft); font-size: 0.92rem; } .callout { border-radius: var(--md-sys-shape-corner-large); padding: 16px 20px; margin: 18px 0; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .callout.green { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .callout.warn { background: var(--warm-soft); color: #4a1f08; } .callout b { display: block; margin-bottom: 4px; font-family: var(--font-display); } .way-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 16px 0 8px; } .way { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); padding: 18px; background: #ffffff; } .way .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-tertiary); margin-bottom: 4px; } .way h3 { margin: 0 0 6px; font-size: 1.05rem; } .way p { font-size: 0.92rem; color: var(--ink-soft); margin: 0; } .data-table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 0.95rem; } .data-table th { text-align: left; font-family: var(--font-display); font-weight: 600; color: var(--navy); border-bottom: 2px solid var(--line); padding: 8px 10px; } .data-table td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; } .data-table td.n { text-align: right; font-family: var(--font-num); white-space: nowrap; } .steps { counter-reset: s; list-style: none; padding: 0 !important; } .steps li { counter-increment: s; position: relative; padding-left: 46px; min-height: 34px; } .steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-secondary-container); color: var(--navy); font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; } .cta-band { margin-top: 32px; border-radius: var(--md-sys-shape-corner-extra-large); padding: 28px; background: linear-gradient(160deg, var(--navy-deep), var(--navy)); color: #ffffff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .cta-band h3 { color: #ffffff; margin: 0 0 4px; } .cta-band p { color: #d9e4f2; margin: 0; } .cta-band .btn { text-decoration: none; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0 16px; } .kv dt { font-weight: 600; color: var(--navy); } .kv dd { margin: 0; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 12px 0 24px; } .contact-card { border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-large); padding: 20px; background: #ffffff; } .contact-card h3 { margin: 0 0 6px; font-size: 1.05rem; } .contact-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.93rem; } /* ── Smartphones ────────────────────────────────────── */ @media (max-width: 480px) { .wrap { padding: 0 16px; } .brand-logo { height: 22px; } nav.main .btn-cta { padding: 0.5rem 0.8rem; font-size: 0.78rem; } #videos .videos-gross, .videos { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } .article { padding: 28px 18px; } .cta-band { padding: 22px; } } .article a, .kv dd, footer a { overflow-wrap: anywhere; } /* Lange deutsche Komposita (z. B. „Datenschutzerklärung“) auf schmalen Displays trennen. */ h1, h2, h3, .article p, .article li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* Grid-Kinder dürfen schmaler werden als ihr Inhalt (sonst Überlauf auf 360-px-Displays). */ .qc-grid > *, .videos > *, .keyfacts > *, .qc-facts > *, .ns-grid > * { min-width: 0; } @media (max-width: 480px) { .qc-card, .qc-result { padding: 22px 18px; } } /* Höhe ergibt sich aus dem 16:9-Format; eine Mindesthöhe würde die Kacheln auf Smartphones verbreitern. */ #videos .video-ph { min-height: 0; } .hero h1 { hyphens: manual; -webkit-hyphens: manual; } /* Video-Bereich: frei verfügbar vs. im Kundenportal */ .video-gruppe { font-size: 1.05rem; margin: 30px 0 4px; display: flex; align-items: center; gap: 10px; } .video-zahl { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-secondary-container); color: var(--navy); } a.video-lock { text-decoration: none; transition: transform 0.2s var(--md-sys-motion-easing-standard), box-shadow 0.2s; } a.video-lock:hover { transform: translateY(-2px); box-shadow: var(--md-ext-elevation-karte-hover); } .video-lock { background: linear-gradient(150deg, #1a2f4d, #2b4466); } .video-lock::before { content: "🔒"; color: #ffffff; } .video-lock .tag { background: rgba(255, 255, 255, 0.92); color: var(--navy); } .video-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; } .video-cta-login { font-weight: 600; color: var(--navy-light); } #videos .video-note { display: none; } /* Sehr schmale Telefone: Logo und Registrieren-Schaltfläche passen nebeneinander. */ @media (max-width: 380px) { .brand-logo { height: 20px; } .authbar .btn-cta { padding: 0.55rem 0.85rem; font-size: 0.85rem; } } /* Material-Elevation: Karten heben sich beim Überfahren leicht an. */ .trust-card, .faq-item, .video-ph { transition: box-shadow 0.2s var(--md-sys-motion-easing-standard), transform 0.2s var(--md-sys-motion-easing-standard); } .trust-card:hover, .video-ph:hover { box-shadow: var(--md-ext-elevation-karte-hover); transform: translateY(-2px); } .faq-item:hover { box-shadow: var(--md-ext-elevation-karte-hover); } /* ── Anmeldestatus (assets/anmeldestatus.js) ──────────── Gäste sehen „Anmelden“/„Registrieren“, im Kundenportal Angemeldete „Mein Kundenportal“ und „Abmelden“. Die Umschaltung selbst (data-nur-gast / data-nur-angemeldet) steht als