@charset "UTF-8"; /* ========================================================================== money-factory.de | Stylesheet -------------------------------------------------------------------------- Datei: /assets/css/main.css Aufbau: Eine Datei, intern per @layer modularisiert. Ein Request statt mehrerer, ohne Verlust an Struktur. Die Kaskadenreihenfolge ist unten festgelegt und unabhaengig von der Position im Dokument. Farbherkunft: Die Markenfarben sind direkt aus dem Logo (Logo_Neu_MONEYFACTORY_27092024.png) entnommen: Navy #061928 (Hintergrund des Logos) Gold #F5A939 (Sonne, Lorbeer, Wortmarke) Kontrast (WCAG 2.2, gemessen - nicht geschaetzt): Gold auf Navy = 9.02:1 -> AAA, fuer Text und CTA freigegeben Navy auf Gold = 9.02:1 -> AAA, Beschriftung auf goldenen Buttons Gold auf Weiss = 1.98:1 -> NICHT als Textfarbe auf Hell verwenden. Akzenttext auf Hell: --mf-gold-ink (#7A4E0C, 7.19:1). Fokusring auf Weiss = 3.81:1 -> --mf-gold-700 (#B5750F), erfuellt die 3:1-Anforderung fuer Nicht-Text (1.4.11). Formularrahmen = 3.93:1 -> --mf-grey-500 (#75828F), ebenfalls 1.4.11. ========================================================================== */ /* -------------------------------------------------------------------------- Kaskadenreihenfolge. Frueher genannt = niedrigere Prioritaet. "vendor" steht bewusst GANZ VORNE und wird hier deklariert, obwohl die Datei selbst nichts hineinschreibt. Grund: Das Stylesheet der Vergleichsmodule (vvergleich-vendor.css) laedt seine 42 KB in diese Schicht. Rund 180 seiner 574 Selektoren sind NICHT auf #vvergleich begrenzt - darunter .freeze, .freeze *, .hilfehidden, #detailFragen und table#tbl_GesellListe. Ohne Schichtung koennte davon etwas in unser Layout durchschlagen, sobald sich ein Name einmal ueberschneidet. Da die Reihenfolge hier festgelegt wird und nicht durch die Ladefolge, gewinnen unsere Regeln jede Ueberschneidung - unabhaengig davon, welche Datei zuerst im steht und ohne dass eine einzige Fremdregel angefasst werden muss. -------------------------------------------------------------------------- */ @layer vendor, tokens, base, layout, components, utilities; /* ========================================================================== 1. TOKENS ========================================================================== */ @layer tokens { :root { /* --- Marke ------------------------------------------------------- */ --mf-navy-900: #061928; --mf-navy-800: #0B2438; --mf-navy-700: #143251; --mf-navy-600: #1F4368; --mf-gold-400: #F8BE63; --mf-gold-500: #F5A939; --mf-gold-600: #D98C1F; --mf-gold-700: #B5750F; --mf-gold-ink: #7A4E0C; /* --- Neutrale ---------------------------------------------------- */ --mf-white: #FFFFFF; --mf-grey-050: #F6F8FA; --mf-grey-100: #EDF1F5; --mf-grey-200: #DCE3EA; --mf-grey-400: #93A1B0; --mf-grey-500: #75828F; --mf-grey-600: #4E5C6B; --mf-ink: #10202E; /* --- Signalfarben ------------------------------------------------ */ --mf-success: #1D6B4B; --mf-error: #B3261E; /* --- Semantische Rollen ------------------------------------------ */ --mf-bg: var(--mf-white); --mf-bg-alt: var(--mf-grey-050); --mf-bg-invert: var(--mf-navy-900); --mf-text: var(--mf-ink); --mf-text-muted: var(--mf-grey-600); --mf-text-invert: var(--mf-white); --mf-border: var(--mf-grey-200); /* dekorative Trennlinien */ --mf-border-input: var(--mf-grey-500); /* Bedienelemente, 1.4.11 */ --mf-accent: var(--mf-gold-500); --mf-focus: var(--mf-gold-700); /* --- Typografie -------------------------------------------------- Systemschriften: kein externer Font-Request (DSGVO + Performance). Selbst gehostete Schriften spaeter in /assets/fonts ergaenzen. */ --mf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mf-font-num: ui-monospace, "SFMono-Regular", "Consolas", monospace; --mf-fs-xs: 0.8125rem; --mf-fs-sm: 0.9375rem; --mf-fs-base: 1.0625rem; --mf-fs-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); --mf-fs-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --mf-fs-h2: clamp(1.5rem, 1.2vw + 1.2rem, 2.125rem); --mf-fs-h1: clamp(1.875rem, 2.4vw + 1.25rem, 3rem); --mf-lh-tight: 1.2; --mf-lh-base: 1.65; /* --- Abstaende (4px-Raster) --------------------------------------- */ --mf-space-1: 0.25rem; --mf-space-2: 0.5rem; --mf-space-3: 0.75rem; --mf-space-4: 1rem; --mf-space-5: 1.5rem; --mf-space-6: 2rem; --mf-space-7: 3rem; --mf-space-8: 4rem; --mf-space-9: 6rem; /* --- Layout ------------------------------------------------------- */ --mf-container: 76rem; --mf-container-narrow: 46rem; --mf-gutter: clamp(1rem, 4vw, 2.5rem); --mf-header-h: 4.5rem; /* --- Form & Tiefe -------------------------------------------------- */ --mf-radius-sm: 4px; --mf-radius: 8px; --mf-radius-lg: 16px; --mf-shadow-1: 0 1px 2px rgba(6, 25, 40, 0.06), 0 2px 8px rgba(6, 25, 40, 0.05); --mf-shadow-2: 0 4px 12px rgba(6, 25, 40, 0.08), 0 12px 32px rgba(6, 25, 40, 0.10); --mf-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1); } } /* ========================================================================== 2. BASE ========================================================================== */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mf-header-h) + var(--mf-space-4)); } body { margin: 0; background: var(--mf-bg); color: var(--mf-text); font-family: var(--mf-font-sans); font-size: var(--mf-fs-base); line-height: var(--mf-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0 0 var(--mf-space-4); line-height: var(--mf-lh-tight); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--mf-fs-h1); } h2 { font-size: var(--mf-fs-h2); } h3 { font-size: var(--mf-fs-h3); } h4 { font-size: var(--mf-fs-lg); } p, ul, ol, dl, figure, table { margin: 0 0 var(--mf-space-5); } p { max-width: 68ch; text-wrap: pretty; } a { color: var(--mf-navy-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--mf-transition); } a:hover { color: var(--mf-gold-ink); } img, svg, video { max-width: 100%; height: auto; } img { display: block; } strong { font-weight: 700; } hr { border: 0; border-top: 1px solid var(--mf-border); margin: var(--mf-space-7) 0; } code, kbd, samp { font-family: var(--mf-font-num); font-size: 0.9em; } /* Sichtbarer Fokus - Grundvoraussetzung fuer Tastaturbedienung. */ :focus-visible { outline: 3px solid var(--mf-focus); outline-offset: 2px; border-radius: var(--mf-radius-sm); } /* Auf dunklem Grund braucht der Fokusring eine helle Farbe. */ .site-header :focus-visible, .site-footer :focus-visible, .section--invert :focus-visible { outline-color: var(--mf-gold-400); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } } /* ========================================================================== 3. LAYOUT ========================================================================== */ @layer layout { .container { width: 100%; max-width: var(--mf-container); margin-inline: auto; padding-inline: var(--mf-gutter); } .container--narrow { max-width: var(--mf-container-narrow); } .section { padding-block: var(--mf-space-8); } .section--tight { padding-block: var(--mf-space-6); } .section--alt { background: var(--mf-bg-alt); } .section--invert { background: var(--mf-bg-invert); color: var(--mf-text-invert); } .section--invert h1, .section--invert h2, .section--invert h3 { color: var(--mf-text-invert); } .section--invert a { color: var(--mf-gold-500); } .section--invert a:hover { color: var(--mf-gold-400); } @media (min-width: 48em) { .section { padding-block: var(--mf-space-9); } } /* --- Skip-Link ----------------------------------------------------- */ .skip-link { position: absolute; left: var(--mf-space-4); top: var(--mf-space-4); z-index: 200; padding: var(--mf-space-3) var(--mf-space-4); background: var(--mf-gold-500); color: var(--mf-navy-900); font-weight: 600; border-radius: var(--mf-radius); transform: translateY(-200%); transition: transform var(--mf-transition); } .skip-link:focus { transform: translateY(0); } /* --- Header -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--mf-navy-900); color: var(--mf-text-invert); } .site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mf-space-4); min-height: var(--mf-header-h); } /* --- Markenzeichen (Emblem + Wortmarke) ----------------------------- */ .site-header__brand, .site-footer__brand { display: inline-flex; align-items: center; gap: var(--mf-space-3); text-decoration: none; color: inherit; } .site-header__brand img, .site-footer__brand img { width: 2.75rem; height: 2.75rem; border-radius: var(--mf-radius-sm); } .brand__text { display: grid; line-height: 1.1; } .brand__name { color: var(--mf-gold-500); font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.03em; } .brand__sub { color: var(--mf-grey-200); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } @media (min-width: 30em) { .brand__name { font-size: 1.1875rem; } } /* --- Footer -------------------------------------------------------- */ .site-footer { background: var(--mf-navy-900); color: var(--mf-text-invert); padding-block: var(--mf-space-8) var(--mf-space-6); font-size: var(--mf-fs-sm); } .site-footer__grid { display: grid; gap: var(--mf-space-6); grid-template-columns: 1fr; } @media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } } .site-footer__claim { color: var(--mf-gold-500); font-weight: 600; margin-top: var(--mf-space-4); } .site-footer__heading { font-size: var(--mf-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mf-gold-500); margin-bottom: var(--mf-space-3); } .site-footer__list { list-style: none; padding: 0; margin: 0; } .site-footer__list li + li { margin-top: var(--mf-space-2); } .site-footer__list-sub { padding-left: var(--mf-space-4); } .site-footer__list--plain { color: var(--mf-grey-200); } .site-footer__reg { color: var(--mf-grey-400); } .site-footer address, .site-footer__address { font-style: normal; margin-top: var(--mf-space-4); color: var(--mf-grey-200); } .site-footer a { color: var(--mf-white); } .site-footer a:hover { color: var(--mf-gold-500); } .site-footer__partner { margin: var(--mf-space-4) 0 0; } .site-footer__legal { margin: var(--mf-space-7) 0 0; padding-top: var(--mf-space-5); border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--mf-grey-400); font-size: var(--mf-fs-xs); max-width: none; } } /* ========================================================================== 4. COMPONENTS ========================================================================== */ @layer components { /* --- Navigation ---------------------------------------------------- */ .nav-toggle { display: inline-flex; align-items: center; gap: var(--mf-space-2); padding: var(--mf-space-2) var(--mf-space-3); background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--mf-radius); color: var(--mf-white); font: inherit; font-size: var(--mf-fs-sm); cursor: pointer; } .nav-toggle__box { display: grid; gap: 4px; width: 20px; } .nav-toggle__line { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--mf-transition), opacity var(--mf-transition); } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--mf-navy-800); border-top: 1px solid rgba(255, 255, 255, 0.12); padding: var(--mf-space-3) var(--mf-gutter) var(--mf-space-5); max-height: calc(100dvh - var(--mf-header-h)); overflow-y: auto; } .site-nav.is-open { display: block; } .site-nav__list { list-style: none; margin: 0; padding: 0; } .site-nav__item { position: relative; } .site-nav__item + .site-nav__item { border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-nav__link, .site-nav__sublink { display: block; padding: var(--mf-space-3) 0; color: var(--mf-white); text-decoration: none; font-weight: 600; } .site-nav__sublink { font-weight: 500; color: var(--mf-grey-200); } .site-nav__link:hover, .site-nav__sublink:hover, .site-nav__link.is-active, .site-nav__sublink.is-active { color: var(--mf-gold-500); } .site-nav__link.is-active { text-decoration: underline; text-underline-offset: 0.3em; } .site-nav__expander { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: none; border: 0; color: var(--mf-white); cursor: pointer; } .site-nav__chevron { width: 20px; height: 20px; transition: transform var(--mf-transition); } .site-nav__expander[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); } .site-nav__sub { list-style: none; margin: 0 0 var(--mf-space-3); padding: 0 0 0 var(--mf-space-4); border-left: 2px solid var(--mf-gold-600); } .site-nav__item--cta { border-top: 0; margin-top: var(--mf-space-4); } @media (min-width: 62em) { .nav-toggle { display: none; } .site-nav { display: block; position: static; background: transparent; border: 0; padding: 0; max-height: none; overflow: visible; } .site-nav__list { display: flex; align-items: center; gap: var(--mf-space-2); } .site-nav__item + .site-nav__item { border-top: 0; } .site-nav__link { padding: var(--mf-space-3) var(--mf-space-3); font-size: var(--mf-fs-sm); } .site-nav__item--has-sub .site-nav__link { padding-right: var(--mf-space-6); } .site-nav__expander { width: 2rem; height: 100%; right: var(--mf-space-1); } .site-nav__sub { position: absolute; top: calc(100% - 2px); left: 0; min-width: 17rem; margin: 0; padding: var(--mf-space-2); background: var(--mf-navy-800); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 0; border-radius: 0 0 var(--mf-radius) var(--mf-radius); box-shadow: var(--mf-shadow-2); z-index: 10; } .site-nav__sublink { padding: var(--mf-space-2) var(--mf-space-3); border-radius: var(--mf-radius-sm); } .site-nav__sublink:hover { background: rgba(255, 255, 255, 0.06); } .site-nav__item--cta { margin-top: 0; margin-left: var(--mf-space-3); } } /* --- Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mf-space-2); min-height: 2.75rem; /* 44px Touch-Ziel (WCAG 2.2, 2.5.8) */ padding: var(--mf-space-3) var(--mf-space-5); border: 2px solid transparent; border-radius: var(--mf-radius); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--mf-transition), border-color var(--mf-transition), color var(--mf-transition), transform var(--mf-transition); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--mf-gold-500); border-color: var(--mf-gold-500); color: var(--mf-navy-900); } .btn--primary:hover { background: var(--mf-gold-600); border-color: var(--mf-gold-600); color: var(--mf-navy-900); } .btn--secondary { background: var(--mf-navy-900); border-color: var(--mf-navy-900); color: var(--mf-white); } .btn--secondary:hover { background: var(--mf-navy-700); border-color: var(--mf-navy-700); color: var(--mf-white); } .btn--ghost { background: transparent; border-color: currentColor; color: inherit; } .btn--ghost:hover { background: rgba(6, 25, 40, 0.06); color: inherit; } .section--invert .btn--ghost:hover, .consent .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); } .btn--sm { min-height: 2.5rem; padding: var(--mf-space-2) var(--mf-space-4); font-size: var(--mf-fs-sm); } .btn--block { width: 100%; } .link-button { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } .link-button:hover { color: var(--mf-gold-500); } /* --- Hero ----------------------------------------------------------- */ .hero { background: radial-gradient(90rem 40rem at 78% -10%, rgba(245, 169, 57, 0.16), transparent 60%), var(--mf-navy-900); color: var(--mf-text-invert); padding-block: var(--mf-space-8); } @media (min-width: 48em) { .hero { padding-block: var(--mf-space-9); } } .hero__grid { display: grid; gap: var(--mf-space-6); align-items: center; } @media (min-width: 62em) { .hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--mf-space-8); } } .hero__eyebrow { display: inline-block; margin-bottom: var(--mf-space-4); padding: var(--mf-space-1) var(--mf-space-3); border: 1px solid var(--mf-gold-500); border-radius: 999px; color: var(--mf-gold-500); font-size: var(--mf-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .hero__lead { font-size: var(--mf-fs-lg); color: var(--mf-grey-200); } .hero__visual { display: flex; justify-content: center; } .hero__visual img { width: min(100%, 26rem); height: auto; border-radius: var(--mf-radius-lg); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--mf-space-3); margin-top: var(--mf-space-6); } /* --- Cards ---------------------------------------------------------- */ .card-grid { display: grid; gap: var(--mf-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .card { display: flex; flex-direction: column; padding: var(--mf-space-5); background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow-1); transition: box-shadow var(--mf-transition), transform var(--mf-transition); } .card:hover { box-shadow: var(--mf-shadow-2); transform: translateY(-2px); } .card__title { font-size: var(--mf-fs-h3); margin-bottom: var(--mf-space-2); } .card__text { color: var(--mf-text-muted); margin-bottom: var(--mf-space-4); } .card__link { margin-top: auto; font-weight: 700; } /* Ganze Karte klickbar, ohne die Semantik des Links zu verlieren. */ .card--linked { position: relative; } .card--linked .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* --- Formulare ------------------------------------------------------ */ .form__row { margin-bottom: var(--mf-space-5); } .form__label { display: block; margin-bottom: var(--mf-space-2); font-weight: 600; } .form__hint { display: block; font-size: var(--mf-fs-sm); color: var(--mf-text-muted); font-weight: 400; } .form__control { width: 100%; min-height: 2.75rem; padding: var(--mf-space-3); background: var(--mf-white); border: 1px solid var(--mf-border-input); border-radius: var(--mf-radius); color: var(--mf-text); font: inherit; } .form__control:hover { border-color: var(--mf-grey-600); } .form__control[aria-invalid="true"] { border-color: var(--mf-error); border-width: 2px; } .form__error { display: block; margin-top: var(--mf-space-2); color: var(--mf-error); font-size: var(--mf-fs-sm); font-weight: 600; } /* Honigtopf gegen Roboter - fuer Screenreader ebenfalls unsichtbar. Bewusst NICHT display:none: manche Roboter ueberspringen versteckte Felder. Ausserhalb des Sichtfelds fuellen sie es dagegen brav aus. */ .form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form__row--split { display: grid; gap: var(--mf-space-4); } @media (min-width: 34em) { .form__row--split { grid-template-columns: 1fr 1fr; gap: var(--mf-space-5); } } textarea.form__control { min-height: 9rem; resize: vertical; } .form__check { display: grid; grid-template-columns: auto 1fr; gap: var(--mf-space-2) var(--mf-space-3); align-items: start; } .form__check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--mf-navy-900); } .form__check label { font-size: var(--mf-fs-sm); } .form__check .form__error { grid-column: 1 / -1; } .form__note { font-size: var(--mf-fs-sm); color: var(--mf-text-muted); margin-bottom: var(--mf-space-5); } /* Aufklaerung zur Einwilligung: muss auffallen, ohne wie eine Warnung auszusehen - sonst liest sie niemand, und genau darauf kommt es an. */ .form__note--consent { padding: var(--mf-space-4); background: var(--mf-grey-050); border-left: 3px solid var(--mf-gold-500); border-radius: 0 var(--mf-radius) var(--mf-radius) 0; color: var(--mf-text); } /* --- Meldungen ------------------------------------------------------ */ .alert { padding: var(--mf-space-5); border-radius: var(--mf-radius-lg); border-left: 4px solid; margin-bottom: var(--mf-space-5); } .alert__title { font-size: var(--mf-fs-h3); margin-bottom: var(--mf-space-3); } .alert__list { margin: 0; padding-left: var(--mf-space-5); } .alert__list li + li { margin-top: var(--mf-space-2); } .alert p:last-child { margin-bottom: 0; } .alert--success { background: #EAF5EF; border-color: var(--mf-success); color: #10402C; } .alert--success a { color: #10402C; } .alert--error { background: #FBEDEC; border-color: var(--mf-error); color: #6E1712; } .alert--error a { color: #6E1712; } /* --- Kontaktseite ---------------------------------------------------- */ .kontakt__grid { display: grid; gap: var(--mf-space-6); align-items: start; } @media (min-width: 62em) { .kontakt__grid { grid-template-columns: 1.5fr 1fr; gap: var(--mf-space-8); } .kontakt__aside { position: sticky; top: calc(var(--mf-header-h) + var(--mf-space-5)); } } .kontakt__form-col { max-width: 44rem; } .kontakt__dl { margin: 0 0 var(--mf-space-5); } .kontakt__dl dt { font-weight: 700; font-size: var(--mf-fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mf-text-muted); margin-top: var(--mf-space-4); } .kontakt__dl dt:first-child { margin-top: 0; } .kontakt__dl dd { margin: var(--mf-space-1) 0 0; } /* --- Partner-Login ---------------------------------------------------- */ .login-card { max-width: 26rem; } .login-form .form__row:last-of-type { margin-bottom: var(--mf-space-5); } .login-card__note { margin: var(--mf-space-5) 0 0; padding-top: var(--mf-space-4); border-top: 1px solid var(--mf-border); font-size: var(--mf-fs-sm); color: var(--mf-text-muted); } /* --- Rechner-Einbettung --------------------------------------------- */ .calculator { background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-lg); padding: var(--mf-space-5); box-shadow: var(--mf-shadow-1); } .calculator__frame { width: 100%; border: 0; display: block; } .calculator__placeholder { padding: var(--mf-space-6); border: 2px dashed var(--mf-grey-500); border-radius: var(--mf-radius); background: var(--mf-grey-050); color: var(--mf-text-muted); text-align: center; } /* --- Consent -------------------------------------------------------- */ .consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 300; background: var(--mf-navy-900); color: var(--mf-text-invert); border-top: 3px solid var(--mf-gold-500); box-shadow: 0 -8px 32px rgba(6, 25, 40, 0.28); /* Auf kleinen Geraeten darf der Dialog den Bildschirm nicht fuellen - sonst ist die Seite dahinter nicht mehr sichtbar und der Nutzer kann nicht pruefen, worauf er sich einlaesst. */ max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; } .consent__inner { max-width: var(--mf-container); margin-inline: auto; padding: var(--mf-space-5) var(--mf-gutter); } .consent__title { font-size: var(--mf-fs-h3); margin-bottom: var(--mf-space-3); } .consent__text { font-size: var(--mf-fs-sm); color: var(--mf-grey-200); max-width: 80ch; } .consent a { color: var(--mf-gold-500); } .consent__options { display: grid; gap: var(--mf-space-3); margin: var(--mf-space-4) 0; padding: 0; border: 0; } @media (min-width: 48em) { .consent__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .consent__option { display: flex; gap: var(--mf-space-3); align-items: flex-start; } .consent__option input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--mf-gold-500); flex: none; } .consent__option label { font-size: var(--mf-fs-sm); } .consent__option label strong { display: block; } .consent__option label span { color: var(--mf-grey-200); } .consent__actions { display: flex; flex-wrap: wrap; gap: var(--mf-space-3); } @media (max-width: 29.99em) { .consent__actions .btn { width: 100%; } } /* --- Rechtsseiten --------------------------------------------------- Impressum, Erstinformation, Datenschutz, Cookie-Richtlinie. Lange Fliesstexte, die gelesen und nicht ueberflogen werden - deshalb etwas mehr Zeilenabstand und klar abgesetzte Zwischenueberschriften. -------------------------------------------------------------------- */ .legal h2 { margin-top: var(--mf-space-7); padding-top: var(--mf-space-4); border-top: 1px solid var(--mf-border); } .legal h3 { margin-top: var(--mf-space-6); } .legal h2 + h3 { margin-top: var(--mf-space-4); } .legal__lead { font-size: var(--mf-fs-lg); color: var(--mf-text-muted); margin-bottom: var(--mf-space-6); } .legal__dl { display: grid; gap: var(--mf-space-1) var(--mf-space-5); margin-bottom: var(--mf-space-5); } .legal__dl dt { font-weight: 700; color: var(--mf-text); } .legal__dl dd { margin: 0 0 var(--mf-space-4); color: var(--mf-text-muted); } @media (min-width: 40em) { .legal__dl { grid-template-columns: 15rem 1fr; } .legal__dl dt { grid-column: 1; } .legal__dl dd { grid-column: 2; margin-bottom: var(--mf-space-3); } } .legal__list { padding-left: var(--mf-space-5); } .legal__list li + li { margin-top: var(--mf-space-3); } /* Breite Tabellen scrollen in sich selbst - die Seite bleibt ruhig. */ .legal__table-wrap { overflow-x: auto; margin-bottom: var(--mf-space-5); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); } .legal__table { width: 100%; min-width: 34rem; margin: 0; border-collapse: collapse; font-size: var(--mf-fs-sm); } .legal__table th, .legal__table td { padding: var(--mf-space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--mf-border); } .legal__table thead th { background: var(--mf-grey-050); font-weight: 700; white-space: nowrap; } .legal__table tbody tr:last-child th, .legal__table tbody tr:last-child td { border-bottom: 0; } .legal__table code { word-break: break-word; } .legal__meta { margin-top: var(--mf-space-7); padding-top: var(--mf-space-4); border-top: 1px solid var(--mf-border); color: var(--mf-text-muted); font-size: var(--mf-fs-sm); } /* --- Entwicklungshinweis (nur MF_ENV = dev) -------------------------- */ .dev-notice { padding: var(--mf-space-3) var(--mf-gutter); background: #FFF4D6; border-bottom: 2px solid var(--mf-gold-600); color: #5B3D00; font-size: var(--mf-fs-sm); line-height: 1.5; } } /* ========================================================================== 5. UTILITIES ========================================================================== */ @layer utilities { .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden; } .text-center { text-align: center; } .text-muted { color: var(--mf-text-muted); } .measure { max-width: 68ch; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .stack > * + * { margin-top: var(--mf-space-4); } }