/* ========================================================================= Vitalis Gesundheit — Ergaenzung zum Basis-Theme Aufsetzendes Theme: site.css bleibt die Grundlage, diese Datei aendert Tokens und legt den Zuschnitt eines Shops darueber. Die Haltung dahinter, nach dem Vorbild guter Haendlerauftritte: hell, luftig, wenig Farbe. Farbe steht dort, wo etwas passieren soll — auf dem Korb, auf der Hauptschaltflaeche, unter dem aktiven Menuepunkt. Alles andere ist Weissraum und Typografie. Vorher war der Kopfbereich ein Stapel farbiger Baender. Das wirkt auf den ersten Blick nach Shop und auf den zweiten nach 2012: die Flaeche ist voll, bevor der erste Inhalt kommt. Hell und Dunkel kommen aus site.css. Hier stehen nur die Werte, 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: #ffffff; --color-bg-soft: #f5f9f8; --color-bg-muted: #f7f8f9; --color-border: #e4e9e8; --color-text: #16211f; --color-text-muted: #5b6b68; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; /* Die Skala in site.css springt von 1rem auf 1.5rem. Dazwischen fehlt der Schritt, den ein luftiger Kopfbereich staendig braucht — ohne ihn loesen sich Regeln mit --space-5 stillschweigend auf: die Eigenschaft ist ungueltig und faellt weg, und zwei Verweise kleben aneinander. */ --space-5: 1.25rem; /* Volle Seitenbreite statt einer schmalen Saeule in der Mitte. Auf einem breiten Bildschirm stand vorher rechts und links ein Drittel der Flaeche leer. Kein 100 % ohne Grenze: ab etwa 120 rem wandern die Augen beim Sprung von der Zeilenendung zum naechsten Zeilenanfang zu weit, und der Kopfbereich zerreisst — Marke ganz links, Korb ganz rechts, dazwischen nichts. Der Fliesstext bleibt zusaetzlich ueber --measure begrenzt. */ --container: 120rem; /* Eigene Werte fuer die Flaechen, die in beiden Modi stehen muessen. Sie greifen ausdruecklich nicht auf --color-secondary zurueck: site.css setzt das im Dunkelmodus auf ein fast weisses Grau, und der Aufmacher stuende dann hell mit hellem Text darauf. */ --shop-bar-bg: #f5f9f8; --shop-bar-text: #46605c; --shop-header-bg: #ffffff; --hero-bg-from: #eef8f6; --hero-bg-to: #ffffff; --hero-text: #0b2f2c; --hero-text-muted: #40605c; --shop-accentbar-bg: #0f766e; --shop-accentbar-text: #ffffff; --shop-footer-bg: #0b2f2c; --shop-footer-text: #b9d6d2; --shop-shadow: 0 20px 45px rgb(11 47 44 / 0.10); --shop-shadow-sm: 0 6px 18px rgb(11 47 44 / 0.08); } :root[data-theme="dark"] { --color-primary: #2dd4bf; --color-primary-dark: #14b8a6; --color-primary-contrast: #06251f; --color-bg-soft: #101f1e; --shop-bar-bg: #0d1a19; --shop-bar-text: #8fb5b0; --shop-header-bg: #0b1614; --hero-bg-from: #0d2422; --hero-bg-to: #0b1614; --hero-text: #ecfffb; --hero-text-muted: #9dc7c1; --shop-accentbar-bg: #0d3d38; --shop-accentbar-text: #ecfffb; --shop-footer-bg: #06201d; --shop-footer-text: #8fb5b0; --shop-shadow: 0 20px 45px rgb(0 0 0 / 0.45); --shop-shadow-sm: 0 6px 18px rgb(0 0 0 / 0.35); } /* ---- Servicezeile ------------------------------------------------------- */ .shop-topbar { background: var(--shop-bar-bg); color: var(--shop-bar-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: 0.6rem; } .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.45em; font-weight: 700; color: var(--color-primary); } .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); } /* Drei Spalten, die Marke in der Mitte. Die beiden aeusseren sind gleich breit, damit die Mitte tatsaechlich die Mitte ist und nicht dorthin rutscht, wo gerade mehr Text steht. */ .shop-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding-block: var(--space-6); } .shop-header__side { display: flex; align-items: center; gap: var(--space-5); font-size: 0.875rem; } .shop-header__side--end { justify-content: flex-end; } .shop-header__side a { color: var(--color-text-muted); text-decoration: none; } .shop-header__side a:hover { color: var(--color-primary); } .shop-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; } .shop-brand__logo { max-height: 3.25rem; width: auto; } .shop-brand__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--color-primary); } .shop-brand__mark svg { width: 100%; height: 100%; } .shop-brand__text { display: flex; flex-direction: column; line-height: 1.15; } .shop-brand__name { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; color: var(--color-text); } .shop-brand__claim { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); } /* Symbole rechts */ .shop-action { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.55rem var(--space-4); border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--color-text); font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer; } .shop-action__icon { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; } .shop-action__icon svg { width: 100%; height: 100%; } .shop-action--cart { border-color: var(--color-border); font-weight: 600; } .shop-action--cart:hover, .shop-action--cart:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .shop-action__count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-contrast); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 61.99rem) { .shop-header__inner { grid-template-columns: auto 1fr; padding-block: var(--space-4); } .shop-header__side--start { display: none; } .shop-action__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* Suche: eine ruhige, breite Zeile unter der Marke statt eines Feldes, das sich zwischen Marke und Symbolen quetscht. */ .shop-header__search { padding-bottom: var(--space-6); } .shop-search { display: flex; align-items: center; gap: var(--space-3); max-width: 44rem; margin-inline: auto; padding-left: var(--space-5); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-soft); } .shop-search:focus-within { border-color: var(--color-primary); background: var(--color-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent); } .shop-search__icon { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; color: var(--color-text-muted); flex: none; } .shop-search__icon svg { width: 100%; height: 100%; } .shop-search__input { flex: 1 1 auto; min-width: 0; padding-block: 0.85rem; border: 0; background: transparent; color: var(--color-text); font: inherit; } .shop-search__input:focus-visible { outline: none; } .shop-search__button { flex: none; margin: 0.3rem; padding: 0.6rem var(--space-6); border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-contrast); font: inherit; font-weight: 600; cursor: pointer; } /* ---- Navigation ---------------------------------------------------------- */ .shop-nav { border-block: 1px solid var(--color-border); background: var(--shop-header-bg); } .shop-nav__inner { display: flex; justify-content: center; overflow-x: auto; } .shop-nav__list { display: flex; align-items: stretch; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .shop-nav__list .menu__item > a, .shop-nav__list .menu__summary { position: relative; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-5); color: var(--color-text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } /* Der Strich unter dem Punkt wird eingeblendet statt eingeschoben: ein Rahmen, der beim Ueberfahren entsteht, verschiebt die Zeile um seine eigene Hoehe. */ .shop-nav__list .menu__item > a::after, .shop-nav__list .menu__summary::after { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); bottom: 0.7rem; height: 2px; border-radius: 2px; background: var(--color-primary); opacity: 0; transition: opacity 140ms ease; } .shop-nav__list .menu__item > a:hover::after, .shop-nav__list .menu__summary:hover::after, .shop-nav__list .menu__item > a[aria-current="page"]::after { opacity: 1; } .shop-nav__list .menu__chevron svg { width: 1em; height: 1em; } .shop-nav__list .menu__children { background: var(--shop-header-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shop-shadow); } /* ---- Warengruppenleiste -------------------------------------------------- */ .shop-subnav__inner { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-6); } .shop-subnav__item { padding: 0.55rem var(--space-5); 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:hover { border-color: var(--color-primary); color: var(--color-primary); } .shop-subnav__item--current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); } /* ---- Aufmacher ----------------------------------------------------------- */ .hero { background: linear-gradient(170deg, var(--hero-bg-from), var(--hero-bg-to) 70%); color: var(--hero-text); } .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-12); padding-block: var(--space-16) var(--space-24); } @media (min-width: 60rem) { .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .hero__eyebrow { display: inline-block; margin: 0 0 var(--space-5); padding: 0.35rem var(--space-4); border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; } .hero__heading { margin: 0 0 var(--space-5); font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: inherit; } .hero__lead { max-width: 44ch; margin: 0 0 var(--space-8); font-size: 1.15rem; line-height: 1.65; color: var(--hero-text-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-8); } .hero__points { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--hero-text-muted); } .hero__points li::before { content: "✓"; margin-right: 0.45em; font-weight: 700; color: var(--color-primary); } /* Schaltflaechen */ .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem var(--space-8); border: 1px solid transparent; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease; } .button--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); box-shadow: var(--shop-shadow-sm); } .button--primary:hover, .button--primary:focus-visible { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-1px); } .button--quiet { border-color: var(--color-border); background: var(--color-bg); color: var(--hero-text); } .button--quiet:hover, .button--quiet:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } /* Zeichnung und die beiden Kennzahlen darauf */ .hero__media { position: relative; /* Ohne Obergrenze waechst die Zeichnung auf einem breiten Bildschirm mit der Spalte mit und ist dann zwei Bildschirmhoehen gross. */ max-width: 38rem; margin-inline: auto; width: 100%; } .hero__image { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shop-shadow); } .hero-illustration { display: block; width: 100%; height: auto; } .hero-illustration__blob { fill: color-mix(in srgb, var(--color-primary) 12%, transparent); } .hero-illustration__shadow { fill: color-mix(in srgb, var(--color-primary) 10%, transparent); } .hero-illustration__line { stroke: var(--color-primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .hero-illustration__thin { stroke-width: 3; opacity: 0.6; } .hero-illustration__wheel { stroke: var(--color-primary); stroke-width: 6; fill: var(--color-bg); } .hero-illustration__accent { fill: var(--color-accent); } .hero__chip { position: absolute; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shop-shadow); line-height: 1.15; /* Ohne das bricht «MITARBEITENDE» um und die Karte wird doppelt hoch als die daneben. */ white-space: nowrap; } /* Innerhalb der Flaeche und nicht darueber hinaus: eine Karte, die aus dem Container ragt, wird auf schmalen Bildschirmen abgeschnitten. */ .hero__chip--top { top: 4%; left: 0; } .hero__chip--bottom { right: 0; bottom: 4%; } .hero__chip-value { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--color-primary); } .hero__chip-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } @media (max-width: 59.99rem) { .hero__chip { display: none; } } /* ---- Vertrauensleiste ---------------------------------------------------- */ .trustbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-8); margin-block: calc(var(--space-12) * -1) var(--space-16); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shop-shadow); list-style: none; position: relative; z-index: 1; } .trustbar li { display: flex; flex-direction: column; gap: 0.35rem; } .trustbar__title { font-weight: 700; } .trustbar__title::before { content: "✓"; margin-right: 0.5em; color: var(--color-primary); } .trustbar__text { font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); } /* ---- Inhalt: mehr Luft, weniger Kasten ----------------------------------- */ /* Die Inhaltskarte des Basis-Themes ist ein Rahmen mit farbiger Kopfzeile. Hier steht sie ohne Rahmen und ohne Fuellung — die Ueberschrift traegt den Abschnitt, nicht der Kasten drumherum. */ .content-card { margin-bottom: var(--space-16); border: 0; border-radius: 0; background: transparent; overflow: visible; } .content-card__heading { padding: 0 0 var(--space-5); background: transparent; color: var(--color-text); font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; } .content-card__body { padding: 0; /* Die Flaeche ist jetzt breit — der Fliesstext darin darf es nicht sein. Raster, Tabellen und Bilder haben ihre eigene Breite und bleiben davon unberuehrt. */ max-width: none; } .content-card__body > p, .content-card__body > ul, .content-card__body > ol, .content-card__body > blockquote { max-width: var(--measure); } .card-grid__item { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shop-shadow-sm); transition: transform 140ms ease, box-shadow 140ms ease; } .card-grid__item:hover { transform: translateY(-3px); box-shadow: var(--shop-shadow); } .card-grid__title { font-size: 1.2rem; letter-spacing: -0.01em; } /* Merkmalskaesten der Startseite als ruhige Kennzahlen */ .feature-boxes { gap: var(--space-6); } .feature-box { padding: var(--space-6); border-radius: var(--radius-lg); border-color: var(--color-border); background: var(--color-bg-soft); } /* ---- Katalog -------------------------------------------------------------- */ /* Suche, Warengruppen und Korbverweis stehen in diesem Theme alle bereits im Kopfbereich. Die Leiste des Basis-Themes waere hier dieselbe Auswahl ein zweites Mal, zehn Zentimeter tiefer. */ .shop-nav ~ main .catalog-toolbar, .shop-nav ~ main .catalog-groups { display: none; } /* Der gezeichnete Platzhalter darf in diesem Theme etwas kraeftiger stehen — die Kachelflaeche ist hell getoent, nicht grau. */ .product-card__media .product-placeholder svg, .product__media .product-placeholder svg { opacity: 0.5; } .product__media .product-placeholder { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--color-bg-soft); } .catalog-grid { gap: var(--space-8); } .product-card { border-color: var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); transition: transform 140ms ease, box-shadow 140ms ease; } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shop-shadow); } /* Die Bildflaeche bleibt hell getoent statt grau: ein leeres graues Rechteck sieht nach fehlendem Bild aus, eine getoente Flaeche nach Gestaltung. */ .product-card__media { background: var(--color-bg-soft); } .product-card__body { padding: var(--space-6); gap: var(--space-3); } .product-card__title { font-size: 1.05rem; line-height: 1.4; } .product-card__price { font-size: 1.15rem; } .product-card__button { padding: 0.7rem var(--space-4); border-radius: 999px; background: var(--color-primary); border-color: 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); } /* ---- Farbiges Band und Fussbereich --------------------------------------- */ .shop-accentbar { margin-top: var(--space-24); background: var(--shop-accentbar-bg); color: var(--shop-accentbar-text); } .shop-accentbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-8); padding-block: var(--space-6); text-align: center; } .shop-accentbar strong { font-size: 1.25rem; } .shop-accentbar a { color: inherit; font-weight: 700; } .shop-footer { 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-4); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #ffffff; } .shop-footer__address { font-style: normal; line-height: 1.9; } .shop-footer ul { margin: 0; padding: 0; list-style: none; line-height: 2.1; } .shop-footer__facts li { line-height: 1.6; margin-bottom: var(--space-3); } .shop-footer__facts li::before { content: "✓"; margin-right: 0.5em; 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-5); } .shop-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-5); line-height: 1.5; } .shop-footer__legal p { margin: 0; }