/* ========================================================================= Vitalis Gesundheit — Ergaenzung zum Basis-Theme Aufsetzendes Theme: site.css bleibt die Grundlage, diese Datei aendert Tokens und legt den Zuschnitt eines Shops darueber — Servicezeile, Kopfbereich mit Suche und Korb, farbige Navigationsleiste, Aufmacher, Vertrauensleiste, Fussbereich in Spalten. Warum nicht eigenstaendig wie nordlicht.css: das Layout ist dasselbe. Ein vollstaendiges zweites Stylesheet hiesse, jede Aenderung am Blocksystem, am Katalog und an den Rechtsseiten zweimal zu pflegen — und beim zweiten Mal wird sie vergessen. Hell und Dunkel kommen aus site.css. Hier werden nur die Werte gesetzt, die dieses Theme anders haben will. ========================================================================= */ /* ---- Tokens ------------------------------------------------------------ */ :root { /* Petrol als Leitfarbe: ruhig, medizinisch konnotiert, ohne den Krankenhaus-Blauton, den jede zweite Pflegeseite traegt. Die Werte stehen zusaetzlich am Tenant und werden von ThemeTokens im ueberschrieben — hier stehen sie als Rueckfall. */ --color-primary: #0f766e; --color-primary-dark: #0b5852; --color-primary-contrast: #ffffff; --color-secondary: #0b3b39; --color-accent: #f59e0b; --color-bg-soft: #f3faf9; --radius-md: 12px; --radius-lg: 20px; /* Kopfbereich: eigene Werte, damit die Leisten auch im Dunkelmodus stehen und nicht mit dem Seitenhintergrund verschwimmen. */ --shop-topbar-bg: #0b3b39; --shop-topbar-text: #cdeae7; --shop-header-bg: #ffffff; --shop-nav-bg: #0f766e; --shop-nav-text: #ffffff; --shop-footer-bg: #0b3b39; --shop-footer-text: #cdeae7; } :root[data-theme="dark"] { --color-primary: #2dd4bf; --color-primary-dark: #14b8a6; --color-primary-contrast: #06251f; --color-bg-soft: #10201f; --shop-topbar-bg: #06251f; --shop-topbar-text: #8fd6ce; --shop-header-bg: #0b1a19; --shop-nav-bg: #0d3d38; --shop-nav-text: #e6fffb; --shop-footer-bg: #06251f; --shop-footer-text: #8fd6ce; } /* ---- Servicezeile ------------------------------------------------------- */ .shop-topbar { background: var(--shop-topbar-bg); color: var(--shop-topbar-text); font-size: 0.8125rem; } .shop-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); } .shop-topbar__promises { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } /* Das Haekchen ist gezeichnet und keine Datei: ein Symbolzeichensatz waere ein zusaetzlicher Abruf fuer drei Haken. */ .shop-topbar__promises li::before { content: "✓"; margin-right: 0.4em; font-weight: 700; color: var(--color-accent); } .shop-topbar__contact { display: flex; gap: var(--space-3); margin: 0; } .shop-topbar a { color: inherit; font-weight: 600; } @media (max-width: 47.99rem) { .shop-topbar__promises li:nth-child(n + 2) { display: none; } } /* ---- Kopfbereich -------------------------------------------------------- */ .shop-header { background: var(--shop-header-bg); border-bottom: 1px solid var(--color-border); } .shop-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-block: var(--space-4); } .shop-brand { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .shop-brand__logo { max-height: 3rem; width: auto; } .shop-brand__name { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-primary); } .shop-brand__claim { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .shop-search { display: flex; flex: 1 1 20rem; min-width: 0; border: 2px solid var(--color-primary); border-radius: 999px; overflow: hidden; background: var(--color-bg); } .shop-search__input { flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-4); border: 0; background: transparent; color: var(--color-text); font: inherit; } .shop-search__input:focus-visible { outline: none; } .shop-search:focus-within { box-shadow: 0 0 0 3px rgb(15 118 110 / 0.2); } .shop-search__button { padding: 0 var(--space-5); border: 0; background: var(--color-primary); color: var(--color-primary-contrast); font-size: 1.25rem; cursor: pointer; } .shop-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .shop-action { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer; } .shop-action:hover, .shop-action:focus-visible { border-color: var(--color-border); background: var(--color-bg-soft); } .shop-action--cart { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; } .shop-action__count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; border-radius: 999px; background: var(--color-accent); color: #1a1200; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 47.99rem) { .shop-action__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* ---- Navigationsleiste --------------------------------------------------- */ .shop-nav { background: var(--shop-nav-bg); color: var(--shop-nav-text); } .shop-nav__inner { display: flex; align-items: stretch; gap: var(--space-2); overflow-x: auto; } .shop-nav__home { display: grid; place-items: center; padding-inline: var(--space-4); color: inherit; font-size: 1.125rem; text-decoration: none; } .shop-nav__list { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; } .shop-nav__list .menu__item > a, .shop-nav__list .menu__summary { display: flex; align-items: center; gap: var(--space-1); height: 100%; padding: var(--space-4) var(--space-4); color: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .shop-nav__list .menu__item > a:hover, .shop-nav__list .menu__item > a[aria-current="page"], .shop-nav__list .menu__summary:hover { background: rgb(255 255 255 / 0.12); } .shop-nav__list .menu__chevron svg { width: 1em; height: 1em; } /* Das Aufklappmenue braucht im Balken einen eigenen Grund, sonst stuenden die Unterpunkte auf dem Seiteninhalt. */ .shop-nav__list .menu__children { background: var(--shop-header-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); } .shop-nav__highlight { display: grid; place-items: center; margin-left: auto; padding-inline: var(--space-6); background: var(--color-accent); color: #1a1200; font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; } /* ---- Warengruppenleiste -------------------------------------------------- */ .shop-subnav { border-bottom: 1px solid var(--color-border); background: var(--color-bg-soft); } .shop-subnav__inner { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-3); } .shop-subnav__item { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; text-decoration: none; } .shop-subnav__item--current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); } /* ---- Aufmacher ----------------------------------------------------------- */ .hero { background: radial-gradient(80rem 40rem at 85% -20%, rgb(45 212 191 / 0.25), transparent 60%), var(--color-secondary); color: #eafffb; } .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-8); padding-block: var(--space-16); } @media (min-width: 60rem) { .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } .hero__eyebrow { margin: 0 0 var(--space-3); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .hero__heading { margin: 0 0 var(--space-4); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; color: inherit; } .hero__lead { max-width: 46ch; margin: 0 0 var(--space-8); font-size: var(--text-lg); line-height: 1.6; color: rgb(234 255 251 / 0.85); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; } .hero__image { width: 100%; height: auto; border-radius: var(--radius-lg); } .button { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-8); border: 2px solid transparent; border-radius: 999px; font-weight: 700; text-decoration: none; } .button--primary { background: var(--color-accent); border-color: var(--color-accent); color: #1a1200; } .button--ghost { border-color: rgb(234 255 251 / 0.5); color: #eafffb; } .button--ghost:hover, .button--ghost:focus-visible { border-color: #eafffb; background: rgb(234 255 251 / 0.1); } /* ---- Vertrauensleiste ---------------------------------------------------- */ .trustbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); margin-block: calc(var(--space-8) * -1) var(--space-12); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: 0 18px 40px rgb(11 59 57 / 0.12); list-style: none; position: relative; z-index: 1; } .trustbar li { display: flex; flex-direction: column; gap: 0.2rem; padding-left: var(--space-6); } .trustbar li::before { content: "✓"; position: absolute; margin-left: calc(var(--space-6) * -1); font-weight: 700; color: var(--color-primary); } .trustbar__title { font-weight: 700; } .trustbar__text { font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); } /* ---- Anpassungen am Katalog ---------------------------------------------- */ /* Im Kopfbereich steht bereits eine Suche. Zwei Suchfelder auf einer Seite sind eine Frage zu viel — im Katalog bleibt deshalb nur der Korbverweis. */ .shop-nav ~ main .catalog-search { display: none; } .product-card { transition: box-shadow 120ms ease, transform 120ms ease; } .product-card:hover { box-shadow: 0 14px 32px rgb(11 59 57 / 0.14); transform: translateY(-2px); } .product-card__button { background: var(--color-primary); color: var(--color-primary-contrast); } .product-card__button:hover, .product-card__button:focus-visible { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .content-card { border-color: var(--color-border); } .content-card__heading { background: var(--color-bg-soft); color: var(--color-text); border-bottom: 1px solid var(--color-border); } /* ---- Fussbereich --------------------------------------------------------- */ .shop-footer { margin-top: var(--space-24); background: var(--shop-footer-bg); color: var(--shop-footer-text); } .shop-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-8); padding-block: var(--space-16); } .shop-footer a { color: inherit; text-decoration: none; } .shop-footer a:hover, .shop-footer a:focus-visible { text-decoration: underline; } .shop-footer__brand { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: #ffffff; } .shop-footer__heading { margin: 0 0 var(--space-3); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; } .shop-footer__address { font-style: normal; line-height: 1.8; } .shop-footer ul { margin: 0; padding: 0; list-style: none; line-height: 2; } .shop-footer__facts li { line-height: 1.6; margin-bottom: var(--space-2); } .shop-footer__facts li::before { content: "✓"; margin-right: 0.4em; color: var(--color-accent); } .shop-footer__legal { border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.8125rem; } .shop-footer__legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .shop-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); line-height: 1.5; } .shop-footer__legal p { margin: 0; }