/* ============================================================ AktienRenteRechner — Site-Layer auf CX-UI (Token-Bridge) ------------------------------------------------------------ Diese Site hat ein eigenes, funktionierendes Mobilmenue (#arkMenu / #arkBurger, 67 Zeilen Inline-CSS im , eigener 1024px-Breakpoint). Das wird NICHT angefasst. Deshalb hier keine Markup-Umstellung, sondern nur die Bruecke: die vorhandenen Variablen aus style.css werden auf CX-UI-Tokens umgebogen, die Layout-Primitives angeglichen. Ergebnis: gleiche Farben, Radien, Abstaende, Container und Typo wie im Rest des Portfolios — bei unveraendertem Header/Footer-Markup. Ladereihenfolge: cx-ui/* -> assets/css/style.css -> assets/css/site.css ============================================================ */ /* --- 1. Alte Variablen auf CX-UI-Tokens -------------------- */ :root { /* Markenfarbe der Site bleibt Blau — sie wird zum CX-Akzent. */ --primary: var(--cx-accent); --primary-dark: var(--cx-accent-hover); --primary-light: var(--cx-accent-light); /* Gruen bleibt semantisch (Erfolg/positive Werte). */ --accent: var(--cx-success); --accent-light: var(--cx-success-light); --green: var(--cx-success); --red: var(--cx-danger); --orange: var(--cx-warn); --dark: var(--cx-text); --gray-900: var(--cx-text); --gray-700: var(--cx-text-mid); --gray-600: var(--cx-text-mid); --gray-500: var(--cx-text-light); --gray-400: var(--cx-text-faint); --gray-300: var(--cx-border-dark); --gray-200: var(--cx-border); --gray-100: var(--cx-border-light); --gray-50: var(--cx-bg-alt); --white: var(--cx-white); --radius: var(--cx-r-lg); --radius-sm: var(--cx-r); --shadow: var(--cx-sh); --shadow-md: var(--cx-sh-lg); --shadow-lg: var(--cx-sh-xl); --header-h: var(--cx-header-h); --max-w: var(--cx-max); } /* --- 2. Layout-Primitives ---------------------------------- */ .container { width: 100%; max-width: var(--cx-max); margin-inline: auto; padding-inline: var(--cx-gutter); } .section, .section-gap, .page-section { padding-block: var(--cx-sec); } /* --- 3. Buttons: gleiche Masse wie im Rest des Portfolios --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cx-s2); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--cx-r); font-family: inherit; font-size: var(--cx-fs-base); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--cx-t), color var(--cx-t), border-color var(--cx-t); } .btn-primary { background: var(--cx-accent); color: var(--cx-white); border-color: transparent; } .btn-primary:hover { background: var(--cx-accent-hover); color: var(--cx-white); } .btn-secondary, .btn-outline, .btn-ghost { background: transparent; color: var(--cx-text); border-color: var(--cx-border); } .btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover { background: var(--cx-bg-alt); border-color: var(--cx-border-dark); } .btn-sm { padding: 6px 14px; font-size: var(--cx-fs-sm); } .btn-lg { padding: 14px 28px; font-size: var(--cx-fs-md); } /* Header-CTA an die CX-Button-Masse angleichen (Markup bleibt) */ .header-cta { padding: 6px 14px; border-radius: var(--cx-r); font-size: var(--cx-fs-sm); font-weight: 500; } /* --- 4. Karten --------------------------------------------- */ .card { background: var(--cx-white); border: 1px solid var(--cx-border); border-radius: var(--cx-r-lg); transition: box-shadow var(--cx-t), border-color var(--cx-t); } .card:hover { box-shadow: var(--cx-sh-lg); border-color: var(--cx-border-dark); } .card h3 { font-size: var(--cx-fs-md); font-weight: 600; } .card p { font-size: var(--cx-fs-base); color: var(--cx-text-light); } /* --- 5. Typo ------------------------------------------------ */ body { font-family: var(--cx-font); font-size: var(--cx-fs-md); line-height: var(--cx-lh); color: var(--cx-text); } h1 { font-size: var(--cx-fs-3xl); letter-spacing: -.02em; } h2 { font-size: var(--cx-fs-2xl); letter-spacing: -.01em; } h3 { font-size: var(--cx-fs-xl); } /* --- 6. Formularfelder (Rechner) ---------------------------- */ input[type=text], input[type=number], input[type=email], select, textarea { font-family: inherit; font-size: var(--cx-fs-md); color: var(--cx-text); background: var(--cx-white); border: 1px solid var(--cx-border); border-radius: var(--cx-r); transition: border-color var(--cx-t), box-shadow var(--cx-t); } input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, textarea:focus { outline: none; border-color: var(--cx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 15%, transparent); } input[type=range] { accent-color: var(--cx-accent); } /* --- 7. Tabellen -------------------------------------------- */ table { border-collapse: collapse; font-size: var(--cx-fs-base); } th { font-size: var(--cx-fs-sm); font-weight: 600; color: var(--cx-text-mid); background: var(--cx-bg-alt); } th, td { border-bottom: 1px solid var(--cx-border); } /* --- 8. Grid-Spalten absichern ------------------------------ Nacktes 1fr blaeht eine Spalte auf die min-content-Breite ihres Inhalts auf (breite Inputs/Tabellen) und erzeugt Overflow. */ [class*="grid"] { min-width: 0; } [class*="grid"] > * { min-width: 0; }