/* X INTERNETDIENSTE – Design-Tokens. Basis: Consulo-Template-Tokens (Original aus index.html ), Farben angepasst an die Marke: Teal #17e4c2 (Akzent/CTA), Navy #0e1528 (Text/Flächen). Muss VOR style.css geladen werden (style.css konsumiert diese Variablen). */ :root { /* Typografie – lokal gehostet (fonts.css) */ --font-body--family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body--style: normal; --font-body--weight: 400; --font-heading--family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading--style: normal; --font-heading--weight: 600; --font-button--family: "Poppins", system-ui, sans-serif; --font-button--style: normal; --font-button--weight: 600; --font-h1--size: 60px; --font-h2--size: 48px; --font-h3--size: 36px; --font-h4--size: 24px; --font-h5--size: 20px; --font-h6--size: 16px; --font-nav-main: 16px; /* Farben – Markenanpassung */ --color-background: rgba(255, 255, 255, 1); --color-foreground: rgba(14, 21, 40, 1); /* Navy #0e1528 */ --color-foreground-heading: rgba(14, 21, 40, 1); /* Kicker (.subheading / .subheading-bg): exakt die Werte des Templates. Sie waren eine Zeit lang auf Markenfarben umgestellt (Slate-Schrift auf teal getoenter Flaeche). Dadurch sah jeder Kicker auf hellem Grund anders aus als im Original – auf dunklen Flaechen setzen die Sektionen eigene Werte, dort fiel es nicht auf. Gemessen aus index-4.html, index-7.html, index-8.html und der Kontaktsektion von index.html. */ --color-foreground-subheading: rgba(93, 102, 111, 1); --color-background-subheading: rgba(255, 255, 255, 0.1); --color-border-subheading-bg: rgba(32, 40, 45, 0.1); --color-primary: rgba(14, 21, 40, 1); --color-primary-background: rgba(14, 21, 40, 1); --color-primary-hover: rgba(23, 228, 194, 1); --color-primary-background-hover: rgba(11, 125, 108, 1); --color-border: rgba(14, 21, 40, 0.15); --color-border-hover: rgba(23, 228, 194, 0.6); --color-shadow: rgba(14, 21, 40, 1); --color-overlay: rgba(14, 21, 40, 0.62); /* Buttons */ --font-button-size: 16px; --font-button-size-mobile: 16px; --style-button-height: 56px; --style-button-height-mobile: 48px; --style-button-slim-height: 52px; --style-button-slim-height-mobile: 40px; --style-cta-underline-offset: 5px; --style-cta-underline-thickness: 1px; /* Buttonfarben – exakt die Originalwerte des Templates. Das Template setzt diese Variablen nur abschnittsweise (.video, .header-3, Hero-Sektionen usw.) und kennt keinen globalen Standard. Eigene Komponenten wie service-cta, sidebar-cta und die Formularbuttons stehen ausserhalb dieser Abschnitte und brauchen deshalb einen Rueckfallwert. Frueher stand hier die Marken-Akzentfarbe. Sie ueberschrieb als :root-Regel (0,1,0) auch die Template-Basiswerte in style.css `body` (0,0,1) – dadurch stand etwa "Jetzt beraten lassen" normal in Teal und wechselte beim Hover auf Weiss/Dunkel: ein sichtbarer Mischzustand. Gemessen am Hero-Buttonpaar aus index-5.html. */ /* Primaer – gefuellt dunkel, Hover invertiert auf Weiss */ --color-primary-button-text: rgba(255, 255, 255, 1); --color-primary-button-background: rgba(32, 40, 45, 1); --color-primary-button-border: rgba(32, 40, 45, 1); --color-primary-button-icon: rgba(28, 37, 57, 1); --color-primary-button-icon-background: rgba(255, 255, 255, 1); --color-primary-button-hover-text: rgba(32, 40, 45, 1); --color-primary-button-hover-background: rgba(255, 255, 255, 1); --color-primary-button-hover-border: rgba(32, 40, 45, 1); --color-primary-button-hover-icon: rgba(255, 255, 255, 1); --color-primary-button-hover-icon-background: rgba(28, 37, 57, 1); /* Sekundaer – Outline hell, Hover invertiert auf Dunkel */ --color-secondary-button-text: rgba(32, 40, 45, 1); --color-secondary-button-background: rgba(255, 255, 255, 1); --color-secondary-button-border: rgba(32, 40, 45, 1); --color-secondary-button-icon: rgba(255, 255, 255, 1); --color-secondary-button-icon-background: rgba(32, 40, 45, 1); --color-secondary-button-hover-text: rgba(255, 255, 255, 1); --color-secondary-button-hover-background: rgba(32, 40, 45, 1); --color-secondary-button-hover-border: rgba(32, 40, 45, 1); --color-secondary-button-hover-icon: rgba(28, 37, 57, 1); --color-secondary-button-hover-icon-background: rgba(255, 255, 255, 1); /* Inputs */ --color-input-background: rgba(255, 255, 255, 1); --color-input-text: rgba(63, 75, 94, 1); --color-input-border: rgba(63, 75, 94, 0.25); --color-input-hover-background: rgba(255, 255, 255, 1); --color-input-hover-text: rgba(63, 75, 94, 1); --color-input-hover-border: rgba(23, 228, 194, 0.6); /* Rahmen / Radius */ --style-border-width-buttons-primary: 1px; --style-border-width-buttons-secondary: 1px; --style-border-radius-buttons-primary: 40px; --style-border-radius-buttons-secondary: 40px; --style-border-width-inputs: 1px; --style-border-radius-inputs: 8px; --style-border-width: 1px; /* Fokus – barrierefrei, Markenfarbe */ --focus-outline-width: 2px; --focus-outline-offset: 3px; /* Pagination */ --style-pagination-border-width: 1px; --pagination-item-foreground: rgba(14, 21, 40, 1); --pagination-item-background: rgba(242, 244, 245, 1); --pagination-item-border: rgba(242, 244, 245, 1); --pagination-item-active-foreground: rgba(14, 21, 40, 1); --pagination-item-active-background: rgba(23, 228, 194, 1); --pagination-item-active-border: rgba(23, 228, 194, 1); /* Swiper */ --swiper-navigation-size: 16px; --swiper-navigation-color: rgba(255, 255, 255, 1); --swiper-pagination-color: rgba(23, 228, 194, 1); --swiper-pagination-bullet-inactive-color: rgba(242, 244, 245, 1); --swiper-pagination-bullet-inactive-opacity: 1; /* Marken-Aliasse (für brand.css / eigene Komponenten) */ --brand-teal: #17e4c2; --brand-teal-2: #1fecb9; --brand-teal-dark: #0b7d6c; --brand-navy: #0e1528; --brand-navy-2: #13283c; --brand-slate: #3f4b5e; --brand-lime: #9ad940; } @media (max-width: 767px) { :root { --font-h1--size: 44px; --font-h2--size: 36px; --font-h3--size: 28px; --font-h4--size: 20px; --font-h5--size: 18px; } }