/* ============================================================ mahnbescheid — Landingpage 1:1 aus dem Claude-Design-Export übernommen. Farb-/Layout-Tokens liegen zentral in css/tokens.css (von beiden Seiten geladen). Hier nur Komponenten-/Layout-Styles und die seiten-spezifischen sRGB-Hex-Fallbacks (Dateiende). Webfonts werden über fonts/fonts.css self-hosted geladen. Aktive Konfiguration (im gesetzt): data-palette="smaragd" data-hero="split" data-tile="icon" data-density="comfortable" ============================================================ */ *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; overflow-x: clip; } body{ font-size: 16px; line-height: 1.55; } a{ color: var(--c-primary); text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover{ color: var(--c-primary-700); text-decoration: underline; } /* Buttons & Logo nie unterstreichen — auch nicht beim Hover */ .btn:hover, .brand:hover{ text-decoration: none; } h1, h2, h3, h4{ font-family: "IBM Plex Sans", sans-serif; color: var(--c-ink); margin: 0; font-weight: 600; letter-spacing: -0.005em; } h1{ font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; } h2{ font-size: 26px; line-height: 1.2; } h3{ font-size: 17px; line-height: 1.3; font-weight: 600; } p{ margin: 0; } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } /* ============ TOP UTILITY BAR ============ */ .utility{ background: var(--c-dark); color: oklch(0.85 0.008 252); font-size: 13px; border-bottom: 1px solid var(--c-dark-border); } .utility .wrap{ display: flex; justify-content: space-between; align-items: center; height: 36px; } .utility a{ color: oklch(0.9 0.008 252); text-decoration: none; } .utility a:hover{ color: #fff; text-decoration: underline; } .util-lang-current{ color: oklch(0.6 0.008 252); cursor: default; } .utility-left, .utility-right{ display: flex; gap: 24px; align-items: center; } .utility-right{ gap: 18px; } .util-sep{ width: 1px; height: 14px; background: var(--c-dark-border); display: inline-block; } /* ============ HEADER ============ */ .header{ background: var(--c-surface); border-bottom: 1px solid var(--c-line); } .header .wrap{ display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; } .brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-ink); } .brand-mark{ width: 40px; height: 40px; flex-shrink: 0; box-sizing: border-box; } .brand-mark svg{ width: 100%; height: 100%; display: block; } .brand-text{ display: flex; flex-direction: column; line-height: 1.15; } .brand-name{ font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .brand-name .tld{ color: var(--c-muted); font-weight: 500; } .brand-tag{ font-size: 12.5px; color: var(--c-muted); letter-spacing: 0.02em; font-weight: 500; } .header-actions{ display: flex; align-items: center; gap: 10px; } .btn{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-md); font: inherit; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .12s ease; } .btn-primary{ background: var(--c-primary); color: #fff; } .btn-primary:hover{ background: var(--c-primary-700); color: #fff; } .btn-ghost{ background: transparent; color: var(--c-primary-700); border-color: var(--c-line); } .btn-ghost:hover{ background: var(--c-primary-050); } .btn-lg{ padding: 14px 22px; font-size: 16px; } .btn-arrow::after{ content: "→"; font-weight: 400; margin-left: 2px; } /* ============ MAIN NAV ============ */ .mainnav{ background: var(--c-primary); color: #fff; } .mainnav .wrap{ display: flex; } .mainnav a{ color: #fff; text-decoration: none; padding: 14px 18px; font-size: 15px; font-weight: 500; border-bottom: 3px solid transparent; } .mainnav a:hover{ background: var(--c-primary-700); } .mainnav a.active{ background: var(--c-primary-700); } /* ============ HERO ============ */ .hero{ background: var(--c-surface); padding: 40px 0 var(--pad-y); border-bottom: 1px solid var(--c-line-soft); } .hero .wrap{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; } /* Grid-Spalten dürfen unter ihre Inhalts-Mindestbreite schrumpfen (sonst weiten lange Select-Optionen die Formularspalte auf) */ .hero .wrap > *{ min-width: 0; } .hero h1{ margin-bottom: 18px; font-size: 35px; } .hero-lede{ font-size: 18px; line-height: 1.55; color: var(--c-ink-soft); max-width: 56ch; margin-bottom: 28px; } .hero-cta{ display: flex; gap: 12px; align-items: center; } /* hero benefits */ .hero-benefits{ list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; margin: 6px 0 28px; } .hero-benefit{ display: flex; align-items: start; gap: 12px; } .hero-benefit .check{ flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ok); color: #fff; display: grid; place-items: center; margin-top: 2px; } .hero-benefit .check svg{ display: block; } .hero-benefit-text{ display: flex; flex-direction: column; gap: 2px; } .hero-benefit-title{ font-weight: 600; color: var(--c-ink); letter-spacing: -0.005em; } .hero-benefit-desc{ font-size: 15px; color: var(--c-ink-soft); line-height: 1.5; } .hero-benefit-desc .tt{ position: relative; display: inline-flex; align-items: center; margin-left: 5px; vertical-align: middle; cursor: help; } .hero-benefit-desc .tt-mark{ width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 1.75px solid var(--c-ink-soft); color: var(--c-ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: "IBM Plex Sans", sans-serif; line-height: 1; font-style: normal; text-align: center; padding-bottom: 0; } .hero-benefit-desc .tt-bub{ position: absolute; bottom: calc(100% + 10px); left: 0; width: 280px; max-width: calc(100vw - 32px); padding: 12px 14px; background: #fff; color: var(--c-ink-soft); font-size: 12.5px; line-height: 1.55; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(0,0,0,.18); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s, visibility 0s linear .15s; z-index: 10; font-weight: 400; text-align: left; } .hero-benefit-desc .tt:hover .tt-bub, .hero-benefit-desc .tt:focus-within .tt-bub{ opacity: 1; visibility: visible; transition: opacity .15s, visibility 0s linear 0s; } /* hero info card (right column) */ .hero-card{ background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-primary); padding: 28px 28px 24px; } .hero-card h2{ font-size: 18px; margin-bottom: 4px; } .hero-card-sub{ font-size: 15px; color: var(--c-muted); margin-bottom: 22px; } .hero-form-row{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .hero-form-row label{ font-size: 15px; font-weight: 500; color: var(--c-ink-soft); } .hero-form-row input, .hero-form-row select{ border: 1px solid var(--c-line); background: #fff; border-radius: var(--r-sm); padding: 9px 12px; font: inherit; color: var(--c-ink); width: 100%; min-width: 0; /* lange