/* ============================================================
BELARO SYSTEM v2 — Zentrales Stylesheet (Single Source of Truth)
EINE Datei für ALLE drei Properties:
belaro.eu · cashflow.belaro.eu · os.belaro.eu
Gehostet auf: https://cashflow.belaro.eu/static/belaro-system.css
1:1-DROP-IN: Klassennamen sind identisch zur bisherigen Version.
Bestehendes HTML funktioniert unverändert — es sieht nur neu aus.
ÄNDERUNGEN ggü. v1:
- Headline-Font: Syne -> Newsreader (Editorial-Serif, seriöser)
- Body-Font: Inter -> Hanken Grotesk
- Gold matt (#C8A24C), kein Hochglanz
- Neues Logo als Wortmarke .brand-lockup (ersetzt die ![]()
-Logos)
- Ruhigere Typo-Skala, mehr Weißraum
NEUER GOOGLE-FONTS-LINK (in jeder Seite ersetzen):
============================================================ */
:root {
--navy:#0A1028; --navy-2:#141F3D; --navy-deep:#060A1C;
--gold:#C8A24C; --gold-2:#B68F3C; --gold-soft:#D9BE7E;
--cream:#FAF8F2; --white-warm:#F5F3EC;
--accent:#C8A24C; --mute:rgba(10,16,40,.60); --mute-2:rgba(10,16,40,.40);
--line:rgba(10,16,40,.10); --bg-card:#FFFFFF;
--score-stabil:#1F7A3D; --score-wachstum:#C8A24C; --score-druck:#E07B1F; --score-risiko:#C73E2E;
/* ── DRUCK-FARBWERTE (Näherung — vor Auflage per Andruck prüfen) ──
NAVY #0A1028 · RGB 10 16 40 · CMYK 90 80 45 60 · Pantone 5255 C (≈ 289 C dunkler)
GOLD #C8A24C · RGB 200 162 76 · CMYK 22 34 82 4 · Pantone 4515 C (≈ 871 C metallic)
CREAM #FAF8F2 · RGB 250 248 242· CMYK 1 1 4 0 · Pantone 7527 C (hell)
Metallic-Alternative Gold für Edeldruck: Pantone 871 C (Gold-Sonderfarbe). */
--shadow-sm:0 1px 2px rgba(10,16,40,.06);
--shadow-md:0 4px 16px rgba(10,16,40,.08);
--shadow-lg:0 18px 48px rgba(10,16,40,.14);
--font-heading:'Newsreader', Georgia, 'Times New Roman', serif;
--font-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono:'JetBrains Mono', ui-monospace, monospace;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
--radius-btn:7px; --radius-card:12px; --radius-box:8px; --radius-pill:999px;
--fs-h1:clamp(34px,5vw,64px); --fs-h2:clamp(26px,3.6vw,44px); --fs-h3:22px;
--fs-body-lg:18px; --fs-body:16px; --fs-small:15px; --fs-caption:13px; --fs-tiny:11px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:-0.02em;}
h1{font-size:var(--fs-h1);line-height:1.05;margin:0 0 18px;}
h2{font-size:var(--fs-h2);line-height:1.12;margin:0 0 18px;}
h3{font-size:var(--fs-h3);line-height:1.3;}
em,.italic{font-style:italic;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--navy);text-decoration:none;}
::selection{background:var(--gold);color:var(--navy);}
/* ── EYEBROW / SECTION-LABEL (Mono, gold) ── */
.eyebrow,.hero-eyebrow,.hero-label,.section-label{
font-family:var(--font-mono);font-size:12px;letter-spacing:0.24em;
text-transform:uppercase;color:var(--gold);font-weight:500;display:block;margin-bottom:16px;
}
/* ── BUTTONS ── */
.btn-primary,.cta-primary,.nav-cta,.topnav-cta{
display:inline-block;background:var(--gold);color:var(--navy);font-family:var(--font-body);
font-weight:600;font-size:var(--fs-small);padding:14px 28px;border-radius:var(--radius-btn);
border:none;cursor:pointer;letter-spacing:0.01em;transition:background .2s,transform .1s;
}
.btn-primary:hover,.cta-primary:hover,.nav-cta:hover,.topnav-cta:hover{background:var(--gold-2);color:var(--navy);}
.btn-primary:active,.cta-primary:active{transform:translateY(1px);}
.btn-secondary{
display:inline-block;background:transparent;color:var(--navy);font-family:var(--font-body);
font-weight:600;font-size:var(--fs-small);padding:14px 28px;border-radius:var(--radius-btn);
border:1px solid var(--navy);cursor:pointer;transition:background .2s,color .2s;
}
.btn-secondary:hover{background:var(--navy);color:var(--cream);}
.btn-tertiary,.btn-ghost{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;font-size:var(--fs-small);cursor:pointer;}
.btn-tertiary::after{content:"→";}
.btn-tertiary:hover{gap:10px;}
.price{display:inline-block;background:var(--accent);color:var(--navy);font-family:var(--font-mono);font-weight:500;font-size:var(--fs-caption);padding:4px 12px;border-radius:4px;}
/* ── CARDS ── */
.card{background:var(--bg-card);border-radius:var(--radius-card);padding:var(--space-5);border:1px solid var(--line);}
.card-dark{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-card);padding:var(--space-5);}
.card-light{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:22px 24px;}
.funnel-step:hover,.blog-card:hover{border-color:var(--gold);transform:translateY(-3px);}
/* ── KPI / ZAHLEN ── */
.kpi-val,.stat-num,.price-amount{font-family:var(--font-mono);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-0.01em;}
.kpi-val,.stat-num{font-size:clamp(26px,2.6vw,34px);}
.kpi-lbl,.stat-label{font-size:var(--fs-caption);color:var(--mute);}
.stat-source,.kpi-sub{font-family:var(--font-mono);font-size:11px;color:var(--mute-2);letter-spacing:.03em;}
.mono{font-family:var(--font-mono);}
/* ── SECTION-FLÄCHEN ── */
.sec-navy{background:var(--navy);color:var(--cream);}
.sec-deep{background:var(--navy-deep);color:var(--cream);}
.sec-cream{background:var(--cream);color:var(--navy);}
.sec-white{background:var(--white-warm);color:var(--navy);}
.sec-gold-rule{border-bottom:2px solid var(--gold);}
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-deep h1,.sec-deep h2,.sec-deep h3,.on-dark h1,.on-dark h2,.on-dark h3,.section-title-light{color:var(--cream);}
.sec-navy .btn-secondary,.sec-deep .btn-secondary,.on-dark .btn-secondary{color:var(--cream);border-color:rgba(245,243,236,0.3);}
.sec-navy .btn-secondary:hover,.sec-deep .btn-secondary:hover,.on-dark .btn-secondary:hover{background:var(--cream);color:var(--navy);border-color:var(--cream);}
.score-stabil{color:var(--score-stabil);} .score-wachstum{color:var(--score-wachstum);}
.score-druck{color:var(--score-druck);} .score-risiko{color:var(--score-risiko);}
.section{padding:clamp(56px,8vw,104px) clamp(20px,4vw,24px);}
.section-tight{padding:44px 24px;}
.section-wide{padding:clamp(64px,9vw,120px) 24px;}
.section-inner{max-width:1180px;margin:0 auto;}
.section-title{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;margin-bottom:16px;}
.section-sub{font-size:var(--fs-body-lg);color:var(--mute);max-width:56ch;}
.on-dark .section-sub,.sec-navy .section-sub,.sec-deep .section-sub{color:rgba(245,243,236,.7);}
/* ── HERO ── */
.hero{background:var(--navy);color:var(--cream);padding:clamp(60px,9vw,110px) clamp(20px,4vw,56px) clamp(48px,6vw,80px);border-bottom:2px solid var(--gold);position:relative;overflow:hidden;}
.hero h1,.hero-title{color:var(--cream);font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.02em;}
.hero h1 em,.hero-title em{color:var(--gold);font-style:italic;}
.hero-sub{font-size:var(--fs-body-lg);line-height:1.55;color:rgba(245,243,236,.72);margin:0 0 32px;max-width:52ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
/* ── TOPNAV (kanonisch — auf ALLEN drei Properties verwenden) ── */
.topnav,nav.site-nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:12px clamp(16px,3vw,44px);background:rgba(10,16,40,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);}
.has-fixednav{padding-top:0;}
.topnav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);list-style:none;}
.topnav-links a{color:rgba(245,243,236,0.72);font-size:14px;font-weight:500;white-space:nowrap;transition:color .2s;}
.topnav-links a:hover{color:#fff;}
.topnav-burger{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;line-height:1;padding:4px 8px;}
@media (max-width:1023.98px){
.topnav-burger{display:block;}
.topnav-links{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;flex-direction:column;align-items:flex-start;background:var(--navy-deep);padding:var(--space-6) var(--space-5);gap:var(--space-5);overflow-y:auto;}
.topnav-links.open{display:flex;}
.topnav-links a{font-size:18px;}
}
/* ── BRAND-LOCKUP (NEUES LOGO — ersetzt alle ![]()
-Logos) ──
HTML:
BELARO®
Strategy (bzw. "OS")
Auf hellem Grund die Eltern-Klasse .brand-lockup--dark setzen.
*/
.brand-lockup{display:inline-flex;flex-direction:column;align-items:center;gap:3px;line-height:1;text-decoration:none;}
.brand-lockup .brand-word{font-family:var(--font-heading);font-size:22px;font-weight:600;letter-spacing:0.16em;color:var(--cream);}
.brand-lockup .brand-word sup{font-size:9px;top:-.8em;color:var(--gold);}
.brand-lockup .brand-rule{align-self:stretch;height:1.5px;background:var(--gold);}
.brand-lockup .brand-sub{font-family:var(--font-mono);font-size:8px;letter-spacing:0.36em;text-transform:uppercase;color:rgba(245,243,236,0.58);}
.brand-lockup--dark .brand-word{color:var(--navy);}
.brand-lockup--dark .brand-sub{color:var(--mute);}
.brand-lockup:hover{text-decoration:none;}
/* ── PREIS-DARSTELLUNG ── */
.price-amount{font-family:var(--font-mono);font-size:clamp(40px,6vw,56px);font-weight:600;line-height:1;color:var(--navy);letter-spacing:-0.02em;}
.price-currency{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--navy);vertical-align:top;}
.price-period{font-family:var(--font-body);font-size:var(--fs-small);color:var(--mute);}
.on-dark .price-amount,.on-dark .price-currency{color:var(--cream);}
.on-dark .price-period{color:rgba(245,243,236,0.65);}
/* ── SCORE-DIAL (für Ergebnis-Report & OS-Dashboard) ──
HTML: 67
*/
.score-dial{width:190px;height:190px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--val,0)*3.6deg), rgba(255,255,255,.09) 0);display:flex;align-items:center;justify-content:center;position:relative;}
.score-dial::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--navy-deep);}
.score-dial > span{position:relative;font-family:var(--font-mono);font-weight:600;font-size:56px;color:var(--cream);line-height:1;}
/* ============================================================
v2.1 — ERGÄNZUNGEN (Formulare · Tabellen · Badges · Alerts ·
Footer · Akkordeon · Utilities). Gleiche Token-Basis, gleiche
Optik. Alles klassenbasiert, 1:1 auf allen Properties nutzbar.
============================================================ */
/* ── FORMULARE ──
Wir schreiben Ihnen nur bei Bedarf.
*/
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--space-4);}
.label{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;letter-spacing:.02em;color:var(--navy);}
.field-hint{font-size:var(--fs-caption);color:var(--mute);}
.field-error{font-size:var(--fs-caption);color:var(--score-risiko);font-weight:500;}
.input,.textarea,.select{
width:100%;font-family:var(--font-body);font-size:var(--fs-body);color:var(--navy);
background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-box);
padding:12px 14px;line-height:1.4;transition:border-color .18s,box-shadow .18s;
}
.textarea{min-height:120px;resize:vertical;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A1028' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.input::placeholder,.textarea::placeholder{color:var(--mute-2);}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,76,.22);}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--white-warm);color:var(--mute);cursor:not-allowed;}
.input.is-error,.textarea.is-error{border-color:var(--score-risiko);}
.input.is-error:focus,.textarea.is-error:focus{box-shadow:0 0 0 3px rgba(199,62,46,.18);}
/* Checkbox / Radio — */
.choice{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-small);color:var(--navy);cursor:pointer;line-height:1.45;}
.choice input[type=checkbox],.choice input[type=radio]{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border:1px solid var(--line);background:var(--bg-card);cursor:pointer;transition:border-color .15s,background .15s;}
.choice input[type=checkbox]{border-radius:5px;}
.choice input[type=radio]{border-radius:50%;}
.choice input:hover{border-color:var(--gold);}
.choice input:checked{background:var(--gold);border-color:var(--gold);}
.choice input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4 8-8' stroke='%230A1028' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;}
.choice input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--navy);}
.choice input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(200,162,76,.22);}
/* Formulare auf dunklem Grund */
.on-dark .label,.sec-navy .label,.sec-deep .label{color:var(--cream);}
.on-dark .input,.on-dark .textarea,.on-dark .select,
.sec-navy .input,.sec-navy .textarea,.sec-navy .select,
.sec-deep .input,.sec-deep .textarea,.sec-deep .select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:var(--cream);}
.on-dark .input::placeholder,.sec-navy .input::placeholder,.sec-deep .input::placeholder{color:rgba(245,243,236,.45);}
.on-dark .field-hint,.sec-navy .field-hint,.sec-deep .field-hint{color:rgba(245,243,236,.6);}
.on-dark .choice,.sec-navy .choice,.sec-deep .choice{color:var(--cream);}
/* ── TABELLEN ── */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-small);}
.table th{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);}
.table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--navy);vertical-align:top;}
.table tbody tr:last-child td,.table tr:last-child td{border-bottom:none;}
.table--striped tbody tr:nth-child(even){background:var(--white-warm);}
.table--hover tbody tr:hover{background:rgba(200,162,76,.06);}
.table td.num,.table th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-card);}
.on-dark .table td,.sec-navy .table td,.sec-deep .table td{color:var(--cream);border-color:rgba(255,255,255,.1);}
.on-dark .table th,.sec-navy .table th,.sec-deep .table th{color:rgba(245,243,236,.6);border-color:rgba(255,255,255,.14);}
/* ── BADGES · TAGS · STATUS-PILLS ──
Neu Liquidität
Stabil
*/
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-tiny);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);background:var(--gold);border-radius:var(--radius-pill);padding:4px 11px;line-height:1.4;}
.badge-soft{background:rgba(200,162,76,.16);color:var(--gold-2);}
.badge-navy{background:var(--navy);color:var(--cream);}
.tag{display:inline-flex;align-items:center;font-size:var(--fs-caption);font-weight:500;color:var(--navy);background:var(--white-warm);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 13px;line-height:1.4;}
.tag:hover{border-color:var(--gold);}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-caption);font-weight:600;border-radius:var(--radius-pill);padding:5px 13px 5px 11px;line-height:1.4;background:var(--white-warm);}
.pill > i{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor;}
.pill-stabil{color:var(--score-stabil);background:rgba(31,122,61,.10);}
.pill-wachstum{color:var(--gold-2);background:rgba(200,162,76,.12);}
.pill-druck{color:var(--score-druck);background:rgba(224,123,31,.12);}
.pill-risiko{color:var(--score-risiko);background:rgba(199,62,46,.10);}
/* ── ALERTS · HINWEISBOXEN · TOAST ──
Hinweis. Text …
*/
.alert{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);line-height:1.5;color:var(--navy);background:var(--bg-card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius-box);padding:14px 16px;}
.alert strong{font-weight:600;}
.alert::before{font-family:var(--font-mono);font-weight:600;flex:none;line-height:1.4;}
.alert-info{border-left-color:var(--navy);} .alert-info::before{content:"i";color:var(--navy);}
.alert-success{border-left-color:var(--score-stabil);} .alert-success::before{content:"✓";color:var(--score-stabil);}
.alert-warning{border-left-color:var(--score-druck);} .alert-warning::before{content:"!";color:var(--score-druck);}
.alert-danger{border-left-color:var(--score-risiko);} .alert-danger::before{content:"×";color:var(--score-risiko);font-size:1.1em;}
.toast{position:fixed;right:24px;bottom:24px;z-index:2000;max-width:360px;display:flex;gap:12px;align-items:flex-start;background:var(--navy);color:var(--cream);border-radius:var(--radius-card);padding:14px 18px;box-shadow:var(--shadow-lg);font-size:var(--fs-small);line-height:1.5;}
.toast .toast-accent{width:3px;align-self:stretch;border-radius:2px;background:var(--gold);flex:none;}
/* ── FOOTER ── */
.site-footer{background:var(--navy-deep);color:rgba(245,243,236,.7);border-top:2px solid var(--gold);padding:var(--space-8) clamp(20px,4vw,44px) var(--space-6);}
.site-footer .footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--space-7);}
.site-footer h4{font-family:var(--font-mono);font-size:var(--fs-tiny);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--space-4);}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.site-footer a{color:rgba(245,243,236,.7);font-size:var(--fs-small);}
.site-footer a:hover{color:var(--cream);}
.site-footer .footer-bottom{max-width:1180px;margin:var(--space-7) auto 0;padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-caption);color:rgba(245,243,236,.5);}
@media (max-width:767.98px){.site-footer .footer-inner{grid-template-columns:1fr 1fr;}}
/* ── AKKORDEON / FAQ ── Frage
…