/* ===================================================================== brands.css — DIE Datei zum Anpassen an die jeweilige Firma. --------------------------------------------------------------------- Marke wird über gesetzt (siehe js/config.js: BRAND_BY_HOST bzw. ?brand=... in der URL). Unterstützt: petesso | sonextis | tmhit Alles Layout-relevante steckt in css/app.css und benutzt AUSSCHLIESSLICH die hier definierten Custom Properties. Für eine neue Firma reicht es, einen weiteren [data-brand="..."]-Block zu ergänzen. ===================================================================== */ /* ---------- Gemeinsame Grundwerte (Fallback / Design-System) ---------- */ :root { /* Typografie */ --brand-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --brand-font-headline: var(--brand-font); --brand-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --brand-headline-weight: 650; --brand-headline-spacing: -0.015em; /* Farben – werden pro Marke überschrieben */ --brand-primary: #1f6feb; --brand-primary-hover: #1a5fd0; --brand-primary-contrast: #ffffff; --brand-accent: #0f9d8a; --brand-ink: #101828; --brand-ink-soft: #475467; --brand-ink-muted: #98a2b3; --brand-bg: #f4f6fb; --brand-surface: #ffffff; --brand-surface-alt: #f8fafc; --brand-border: #e2e6ee; --brand-border-strong: #cfd6e4; /* Statusfarben */ --brand-ok: #12805c; --brand-warn: #b54708; --brand-error: #b42318; /* Kalender / Timeline */ --brand-busy-bg: repeating-linear-gradient(135deg, #e6e9f0 0 6px, #dee2ec 6px 12px); --brand-busy-ink: #667085; --brand-closed-bg: #f1f3f8; --brand-free-bg: #ffffff; --brand-selection-bg: color-mix(in srgb, var(--brand-primary) 16%, white); --brand-selection-border: var(--brand-primary); --brand-selection-ink: var(--brand-primary); /* Form */ --brand-radius: 12px; --brand-radius-sm: 8px; --brand-radius-lg: 20px; --brand-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -12px rgba(16, 24, 40, .14); --brand-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --brand-focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 35%, transparent); /* Inhalte, die aus dem CSS kommen (per content: var(--...)) */ --brand-name: "Terminbuchung"; --brand-claim: "Termin online vereinbaren"; /* Logo: Bilddatei ODER Initiale. Wenn --brand-logo gesetzt wird, bitte --brand-logo-initials auf "" setzen, sonst liegt der Buchstabe darauf. */ --brand-logo: none; /* z. B. url("../img/logo-petesso.svg") */ --brand-logo-size: 34px; --brand-logo-initials: "T"; /* Hintergrundverlauf der Seite */ --brand-page-bg: linear-gradient(180deg, #eef2fa 0%, #f6f8fc 320px, #f6f8fc 100%); } /* ============================== petesso GmbH ============================ */ [data-brand="petesso"] { --brand-primary: #0b5fa5; --brand-primary-hover: #094e88; --brand-accent: #17a2a2; --brand-ink: #0d1b2a; --brand-ink-soft: #46586b; --brand-bg: #f2f6fa; --brand-page-bg: linear-gradient(180deg, #e7f0f7 0%, #f5f8fb 340px, #f5f8fb 100%); --brand-radius: 12px; --brand-name: "petesso GmbH"; --brand-claim: "Termin mit unserem Team vereinbaren"; --brand-logo-initials: "p"; /* Mit eigenem Logo: --brand-logo: url("../img/logo-petesso.svg"); --brand-logo-initials: ""; */ } /* ============================== sonextis GmbH =========================== */ [data-brand="sonextis"] { --brand-primary: #5b3fd6; --brand-primary-hover: #4c33b8; --brand-accent: #e0508b; --brand-ink: #16132b; --brand-ink-soft: #504a6b; --brand-bg: #f5f3fd; --brand-page-bg: linear-gradient(180deg, #efeaff 0%, #f8f7fd 340px, #f8f7fd 100%); --brand-radius: 16px; --brand-radius-lg: 26px; --brand-name: "sonextis GmbH"; --brand-claim: "Beratungstermin buchen"; --brand-logo-initials: "s"; /* Mit eigenem Logo: --brand-logo: url("../img/logo-sonextis.svg"); --brand-logo-initials: ""; */ } /* ================================= TMH IT ============================== */ [data-brand="tmhit"] { --brand-primary: #e8620c; --brand-primary-hover: #c85209; --brand-accent: #2b3440; --brand-ink: #1b1f24; --brand-ink-soft: #4b545e; --brand-bg: #f5f5f4; --brand-page-bg: linear-gradient(180deg, #ececea 0%, #f7f7f6 340px, #f7f7f6 100%); --brand-radius: 6px; --brand-radius-sm: 4px; --brand-radius-lg: 10px; --brand-headline-weight: 700; --brand-name: "TMH IT"; --brand-claim: "Support- und Projekttermin buchen"; --brand-logo-initials: "T"; /* Mit eigenem Logo: --brand-logo: url("../img/logo-tmhit.svg"); --brand-logo-initials: ""; */ } /* ============================== Dark Mode ============================== */ @media (prefers-color-scheme: dark) { :root { --brand-ink: #eef1f6; --brand-ink-soft: #b3bccb; --brand-ink-muted: #7d879a; --brand-bg: #0f1319; --brand-surface: #161b23; --brand-surface-alt: #1c222c; --brand-border: #2a323f; --brand-border-strong: #3a4453; --brand-free-bg: #161b23; --brand-closed-bg: #12161d; --brand-busy-bg: repeating-linear-gradient(135deg, #232b36 0 6px, #1d242e 6px 12px); --brand-busy-ink: #8b95a7; --brand-selection-bg: color-mix(in srgb, var(--brand-primary) 30%, #161b23); --brand-page-bg: linear-gradient(180deg, #10151c 0%, #0f1319 340px, #0f1319 100%); --brand-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6); --brand-ok: #4ade80; --brand-warn: #fbbf24; --brand-error: #fca5a5; } [data-brand="petesso"] { --brand-primary: #4f9fe0; --brand-primary-hover: #6bb0e8; --brand-primary-contrast: #06243c; } [data-brand="sonextis"] { --brand-primary: #9b85f5; --brand-primary-hover: #ad9bf8; --brand-primary-contrast: #1b1240; } [data-brand="tmhit"] { --brand-primary: #ff8a3d; --brand-primary-hover: #ff9f5e; --brand-primary-contrast: #2a1305; } }