/* ========================================================================== IMX-HENSELshop — HENSEL Rollwagen-Shop Design language: www.hensel-fahrzeugbau.de (brand blue #005794, gray #555658, Open Sans, clean neutral surfaces), modernized for the shop. ========================================================================== */ :root { --brand: #005794; /* henselblue (tailwind.config des Hauptauftritts) */ --brand-dark: #00365b; /* henselbluedark ebenda */ --brand-light: #e8f1f8; --ink: #1c1917; --ink-soft: #44403c; /* Lesbarkeit (Jonas 2026-08-03): #6b7280 lag bei 4,83:1 auf Weiss und 4,51:1 auf --surface-alt — knapp ueber WCAG-AA-Minimum und sichtbar blass, dazu oft in 13px. #57534e (warmes Grau, passt zu --ink/--ink-soft) erreicht 7,6:1 bzw. 7,1:1 = AAA, auch fuer Kleintext. */ --muted: #57534e; --line: #e5e7eb; --surface: #ffffff; --surface-alt: #f7f7f6; --success: #166534; /* war #15803d (5,0:1) — jetzt 7,1:1 = AAA */ --radius: 10px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Sicherheitsnetz gegen horizontales Scrollen; clip (nicht hidden), damit position:sticky im Header weiter funktioniert */ html, body { overflow-x: clip; } /* ist nur eine Huelle um das (WebP-Vorschau, siehe contentRenderer.cardImg). display:contents nimmt sie aus dem Layout, damit das selbst Flex- bzw. Grid-Kind bleibt — sonst wuerden alle bestehenden Regeln wie ".product-card__img img { max-width: 88% }" auf die Huelle statt auf das Bild wirken. */ picture { display: contents; } body { margin: 0; font-family: var(--font); /* 1rem statt 16px: uebernimmt die im Browser eingestellte Standard- Schriftgroesse. Wer im Browser 18 oder 20px eingestellt hat (haeufig bei aelteren Nutzern), bekommt die Seite entsprechend groesser — ein fester px-Wert wuerde diese Einstellung ignorieren. */ font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--surface-alt); } img { max-width: 100%; height: auto; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-dark); } /* Wie der Hauptauftritt: max-w-7xl (1280px) mit px-6 (24px) = 1232px Inhalt */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* -------------------------------------------------------------------------- Header — two rows: brand/actions + category nav (dropdowns, mobile drawer) -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); } /* Masse wie der Hauptauftritt: dort ist die Logozeile h-24 (96px) mit 40px-Logo und die blaue Navigationsleiste h-12 (48px). Mobil bleibt die Zeile flacher, weil der Shop-Header sticky ist und 96px dort zu viel Viewport kosten. */ .site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; } @media (min-width: 768px) { .site-header__top { min-height: 96px; } } .site-header__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .site-header__logo { height: 40px; width: auto; display: block; } /* Schmale Viewports: das Logo-SVG ist ~253px breit bei 40px Hoehe — ohne Schrumpfen laeuft die Kopfzeile bei 390px auf ~524px Scrollbreite hinaus. max-width laesst das Logo proportional mitschrumpfen (height:auto). */ @media (max-width: 600px) { .site-header__top { gap: 10px; min-height: 58px; } .site-header__brand { min-width: 0; flex-shrink: 1; gap: 8px; } .site-header__logo { height: auto; max-height: 32px; max-width: calc(100vw - 195px); } .site-header__shopname { font-size: 1.1rem; padding-left: 8px; } .site-header__actions { gap: 10px; flex-shrink: 0; } .site-header__toggle { padding: 8px 4px; } } /* "Beratung:"-Zeile wie im Kopf des Hauptauftritts, erst ab md sichtbar */ .site-header__advice { display: none; } @media (min-width: 900px) { .site-header__advice { display: block; font-size: .875rem; font-weight: 500; white-space: nowrap; } .site-header__advice a { color: var(--ink); } .site-header__advice a:hover { color: var(--brand); } } .site-header__shopname { font-weight: 800; color: var(--brand); font-size: 1.5rem; letter-spacing: .01em; white-space: nowrap; border-left: 2px solid var(--line); padding-left: 14px; line-height: 1; } .site-header__actions { display: flex; align-items: center; gap: 14px; } .header-link { color: var(--ink-soft); font-weight: 600; font-size: .88rem; } .header-link:hover { color: var(--brand); } /* "Anmelden" als Button (nur der Anker; der Konto- eingeloggter Nutzer traegt dieselbe Klasse und soll kein Button werden) */ a.header-link--info { color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 8px; padding: 8px 14px; } a.header-link--info:hover { background: var(--brand-light); color: var(--brand-dark); } .cart-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-soft); background: var(--surface-alt); } .cart-button:hover { background: var(--brand-light); color: var(--brand); } .cart-button__count { position: absolute; top: -2px; right: -2px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; min-width: 19px; height: 19px; line-height: 19px; border-radius: 9px; text-align: center; transition: transform .15s ease; } .cart-button__count.is-empty { background: var(--muted); } .site-header__toggle { display: none; } /* Category bar (desktop) */ .site-nav { background: var(--brand); } /* Trennung zum Hero (Jonas 19.08.2026): auf der Startseite folgt direkt der dunkelblaue Hero, Leiste und Hero verschmolzen zu einer Flaeche. Eine 1px dunklere Kante + weicher Schatten — wie auf dem Hauptauftritt. z-index, damit der Schatten ueber dem Hero liegt. */ .site-nav { position: relative; z-index: 2; box-shadow: inset 0 -1px 0 rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.14); } .site-nav__inner { display: flex; flex-wrap: wrap; min-height: 48px; } /* Negativ-Margin nur am ersten Link (nicht am .container-Element selbst - dort wuerde er das margin:auto-Zentrieren aufheben): so fluchtet der erste Nav-Text mit Logo und Seiteninhalt, das Hover-Feld ragt leicht raus. */ .site-nav__item:first-child > .site-nav__link { margin-left: -12px; } .site-nav__item:first-child > .site-nav__dropdown { left: -12px; } /* Klappmenue mitruecken, sonst steht es 12px rechts der anderen */ /* Suchfeld im Kopf (ab 900px; mobil Lupe in den Actions) */ .site-header__search { display: none; } @media (min-width: 900px) { /* margin: 0 auto zentriert die Suche im Freiraum zwischen "Shop" und Beratung */ .site-header__search { display: flex; margin: 0 auto; } .header-search-mobile { display: none !important; } } .hero { position: relative; } .site-header__searchform { display: flex; } .site-header__searchform input { width: 210px; padding: 8px 12px; font-size: .9rem; font-family: var(--font); /* dunklerer Rand als --line (##e5e7eb, nur 1,24:1): das Feld soll sich klar vom weissen Kopf absetzen. ##858f9c erreicht 3,28:1 und erfuellt damit WCAG 1.4.11 fuer Bedienelement-Begrenzungen (Jonas 2026-08-04) */ border: 1px solid #858f9c; border-radius: 8px 0 0 8px; border-right: 0; } .site-header__searchform input::placeholder { color: var(--muted); opacity: 1; } .site-header__searchform input:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .site-header__searchform button { display: flex; align-items: center; padding: 0 12px; cursor: pointer; background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: 0 8px 8px 0; } .site-header__searchform button:hover { background: var(--brand-dark); } .header-search-mobile { display: flex; align-items: center; color: var(--ink); } /* Schmale Telefone (iPhone 15/16/17 Pro = 402px): Lupe + DE/EN + Warenkorb + Menue sind zusammen ~210px breit, dann schiebt sich "Shop" unter die Lupe. Deshalb nur noch die jeweils ANDERE Sprache als Link, engere Abstaende, kleinerer Warenkorb-Knopf — und das Logo darf nur so breit sein, dass "Shop" daneben passt. */ @media (max-width: 480px) { .site-header__actions { gap: 8px; } .langswitch a.is-active, .langswitch span[aria-hidden] { display: none; } .cart-button { width: 40px; height: 40px; } .site-header__toggle { padding: 8px 2px; } .site-header__shopname { font-size: 1rem; padding-left: 6px; } .site-header__brand { gap: 6px; flex: none; } /* feste Breite statt Flex-Schrumpfen: das SVG hat keine belastbare Eigenbreite und wuerde sonst auf ein paar Dutzend Pixel zusammenfallen */ .site-header__logo { width: min(160px, calc(100vw - 265px)); max-width: none; height: auto; flex: none; } } /* Drag&Drop-Ablagefeld (Wunsch-Rollwagen), Muster vom Kontaktformular des Hauptauftritts */ .dropzone { border: 2px dashed var(--line); border-radius: 8px; background: var(--surface-alt); padding: 22px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .dropzone:hover, .dropzone--active { border-color: var(--brand); background: var(--brand-light); } .dropzone__hint { margin: 0; font-size: .9rem; color: var(--muted); pointer-events: none; } .dropzone__input--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dz-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .dz-thumb { position: relative; } .dz-thumb img, .dz-thumb__pdf { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .dz-thumb__pdf { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .86rem; color: var(--brand); } .dz-thumb__rm { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; font-size: .86rem; font-weight: 700; line-height: 1; cursor: pointer; } .form-field__hint { font-weight: 400; color: var(--muted); } /* Passwortfeld + Anzeigen-Schalter NEBEN dem Feld (Jonas 2026-08-03): nicht im Feld schwebend, dadurch keine Ueberlappung, kein padding-Trick und gleiche Hoehe unabhaengig vom Feldtyp. */ .pw-field { display: flex; align-items: stretch; gap: 8px; } .pw-field input { flex: 1 1 auto; min-width: 0; } .pw-toggle { flex: 0 0 auto; white-space: nowrap; /* feste Mindestbreite: sonst springt die Feldbreite beim Wechsel "Anzeigen" (8 Zeichen) ↔ "Verbergen" (9 Zeichen) */ min-width: 7rem; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); font-family: var(--font); font-size: .84rem; font-weight: 600; padding: 0 14px; cursor: pointer; } .pw-toggle:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); } .pw-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } .search-page__form { display: flex; gap: 10px; max-width: 520px; margin: 0 0 24px; } .search-page__form input { flex: 1; padding: 12px 14px; font-size: 1rem; font-family: var(--font); border: 1px solid var(--line); border-radius: 8px; } /* Vorschlaege auf duennen Ergebnisseiten (0 oder 1 Treffer) */ .search-tips { margin: 32px 0 0; } .search-tips__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .search-tips__chip { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: inherit; text-decoration: none; } .search-tips__chip:hover, .search-tips__chip:focus-visible { border-color: var(--brand); color: var(--brand); } /* Trennlinie + Wunsch-Rollwagen im Dropdown / als letzte Rasterkarte */ .site-nav__subdivider { display: block; border-top: 1px solid var(--line); margin: 6px 0; } .category-card--wunsch { border-style: dashed; } .category-card__img--wunsch { color: var(--brand); background: var(--brand-light); } .site-nav__item { position: relative; display: flex; align-items: stretch; } .site-nav__link { display: flex; align-items: center; padding: 11px 12px; color: #fff; font-weight: 500; font-size: .88rem; /* 500 statt 600 (Jonas 19.08.: "zu fett") */ white-space: nowrap; } /* Long German compounds (e.g. Vegetationsbrandbekämpfung) may hyphenate in narrow contexts instead of pushing the layout */ @media (max-width: 1100px) { .site-nav__link { white-space: normal; overflow-wrap: break-word; hyphens: auto; } } .site-nav__link:hover { color: #fff; } /* Ruhe in der Leiste (Jonas 19.08.2026, "wie apple.com"): keine Bewegung, nur ein sehr schnelles Ein-/Ausblenden — Hover-Flaeche und Klappmenue faden in 120 ms, nichts rutscht, nichts springt. */ .site-nav__link, .site-nav__chevron { transition: background-color .12s ease; } .site-nav__item:hover > .site-nav__link, .site-nav__item:focus-within > .site-nav__link, .site-nav__item.is-active > .site-nav__link { background: var(--brand-dark); color: #fff; } .site-nav__chevron { display: flex; align-items: center; background: none; border: 0; cursor: pointer; color: #fff; opacity: .75; padding: 0 8px 0 0; } .site-nav__item:hover .site-nav__chevron, .site-nav__item:focus-within .site-nav__chevron, .site-nav__item.is-active .site-nav__chevron { background: var(--brand-dark); } /* Klappmenue: immer im Layout (display:block), unsichtbar per opacity/visibility — so kann es faden statt aufzuploppen; pointer-events aus, solange es zu ist. */ .site-nav__dropdown { display: block; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-top: 0; /* ohne dicke blaue Oberkante (Jonas 19.08.), wie Hauptauftritt */ border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); padding: 6px 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, visibility 0s linear .12s; } .site-nav__item:hover .site-nav__dropdown, .site-nav__item:focus-within .site-nav__dropdown, .site-nav__item.is-open .site-nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .12s ease, visibility 0s; } .site-nav__sublink { display: block; padding: 9px 18px; color: var(--ink-soft); font-weight: 500; font-size: .9rem; } .site-nav__sublink { transition: background-color .12s ease, color .12s ease; } .site-nav__sublink:hover, .site-nav__sublink:focus-visible { background: var(--brand-light); color: var(--brand); } .site-nav__sublink--all { font-weight: 700; color: var(--brand); border-bottom: 1px solid var(--line); margin-bottom: 4px; } /* z-index UNTER dem Kopf (50): der Schubladen-Nav liegt im Kopf und kann dessen Stapelkontext nicht verlassen — mit 90 lag der Schleier ueber der Schublade und fing jeden Tipp ab (nichts anklickbar, iPhone 17.08.2026). */ .nav-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); } /* -------------------------------------------------------------------------- Hero (home) -------------------------------------------------------------------------- */ /* Textband in Henselblau — kein Foto mehr im Hintergrund, daher kein Schleier und voller Textkontrast. Das Foto steht unverdeckt darunter (.hero-figure) als echtes . */ .hero { background: linear-gradient(105deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; } .hero__inner { padding: 48px 20px 44px; } /* Ab 900px Text UND Foto nebeneinander (Jonas 2026-08-03): gestapelt blieb rechts neben dem Text ~340px leer, und das Foto rutschte 400px unter die Falte. Darunter bleibt es gestapelt. */ @media (min-width: 900px) { .hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; } } .hero__mainsite-wrap { margin: 22px 0 0; } .hero-figure { position: relative; margin: 24px 0 0; } @media (min-width: 900px) { .hero-figure { margin: 0; } } /* object-fit: cover statt des Standards fill — das CSS-Seitenverhaeltnis passt zwar zum Bild, cover ist aber gegen kuenftige Abweichungen sicher. */ .hero-figure__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; border-radius: 12px; } /* 761-899px: gestapelt in voller Breite, dort das 2,4:1-Band */ @media (min-width: 761px) and (max-width: 899px) { .hero-figure__img { aspect-ratio: 2.4 / 1; } } .hero-figure__cap { position: absolute; right: 0; bottom: 0; background: rgba(0,54,91,.82); color: #fff; font-size: .86rem; padding: 7px 14px; border-radius: 8px 0 12px 0; } .hero-figure__cap a { color: #fff; } .hero-figure__cap a:hover { color: #fff; text-decoration: underline; } /* Mobil UNTER das Bild statt darueber: die Leiste verdeckte sonst Raeder und unteren Rampenbereich. */ @media (max-width: 760px) { .hero-figure__img { border-radius: 12px 12px 0 0; } .hero-figure__cap { position: static; display: block; font-size: .84rem; background: rgba(0,54,91,.92); border-radius: 0 0 12px 12px; padding: 8px 12px; } } .hero__text { max-width: 680px; } /* Typo wie der Hero des Hauptauftritts (/rollwagen/): Dachzeile text-sm/600/ tracking-widest/blue-200, H1 text-4xl (2.25rem, lh 1.2, 600), Lead text-lg/blue-100 */ .hero__eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; font-weight: 600; color: #bfdbfe; margin-bottom: 8px; } /* Zweite Titelzeile eine Stufe kleiner und leichter */ .hero__title2 { display: block; font-size: .78em; font-weight: 500; } .hero h1 { margin: 0 0 12px; font-size: 2.25rem; line-height: 1.2; font-weight: 600; } /* Lead in Weiss (Jonas 2026-08-03, Lesbarkeit) statt blue-100 wie der Hauptauftritt */ .hero__lead { font-size: 1.125rem; color: #fff; max-width: 620px; margin: 0 0 24px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .btn--lg { padding: 15px 30px; font-size: 1.05rem; } /* .btn (weiter unten im Stylesheet) wuerde bei gleicher Spezifitaet gewinnen — daher der Verbund */ @media (max-width: 600px) { .hero__cta .hero__cta-second { display: none; } .hero__cta .btn--lg { padding: 13px 22px; font-size: 1rem; white-space: nowrap; } } /* Kraeftigerer Rahmen (Opus): mit .1 Deckung verlor der Knopf die Kontur */ .btn--hero-ghost { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.85); } .btn--hero-ghost:hover { background: #fff; color: var(--brand-dark); border-color: #fff; } /* Benefit strip */ .benefits { background: var(--surface); border-bottom: 1px solid var(--line); } .benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px 20px; } .benefit svg { width: 34px; height: 34px; color: var(--brand); } .benefit h2, .benefit h3 { margin: 10px 0 4px; font-size: 1rem; } /* h2: Ueberschriften-Reihenfolge nach der H1 (Lighthouse heading-order) */ .benefit p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; } /* Cross-Selling auf der Produktseite */ .related-products { margin: 48px 0 8px; padding-top: 32px; border-top: 1px solid var(--line); } /* Rollwagen-USP-Sektion (Kategorieseiten) — Karten wie .benefit auf der Startseite */ .usp-section { margin: 48px 0 8px; padding-top: 32px; border-top: 1px solid var(--line); } .usp-section__intro { max-width: 760px; color: var(--ink-soft); } .usp-section__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 24px; margin: 24px 0; } .usp-section__more { font-size: .9rem; } /* FAQ (native details-Akkordeons) */ .faq-section { margin: 48px 0 8px; padding-top: 32px; border-top: 1px solid var(--line); } .faq-list { max-width: 820px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .faq-item summary { padding: 14px 18px; cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 42px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--brand); font-weight: 700; font-size: 1.2rem; } .faq-item[open] summary::after { content: '\2212'; } .faq-item[open] summary { border-bottom: 1px solid var(--line); } .faq-item__a { padding: 14px 18px; color: var(--ink-soft); line-height: 1.6; } /* Videos (2-Klick-Facade) + Sonderbau-Block auf der Startseite */ .videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; margin-top: 8px; } .video-card h3 { margin: 0 0 10px; font-size: 1.05rem; } .video-card__note { color: var(--muted); font-size: .86rem; margin: 10px 0 0; } .video-facade { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(120deg, var(--brand-dark), var(--brand)); } .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-facade__btn { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; cursor: pointer; color: #fff; font-family: var(--font); font-weight: 600; } .video-facade__btn small { font-weight: 400; opacity: .8; } .video-facade__play { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); color: var(--brand); font-size: 1.3rem; padding-left: 4px; } .video-facade__btn:hover .video-facade__play { background: #fff; } /* Vorschaubild (selbst gehostet, kein Vimeo-Request) unter dem Knopf; dunkler Verlauf, damit Beschriftung und Datenschutzhinweis lesbar bleiben */ .video-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .video-facade__btn { background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.28) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.6); } .video-facade__btn:hover { background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.36) 100%); } /* Sonderbau-Karte (halbe Breite) + Bestseller-Empfehlung daneben */ /* Zwei Karten nebeneinander: links das Wunsch-Formular, rechts der TÜV-Beweis. stretch = gleiche Hoehe. Unter 900px gestapelt. */ .home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } @media (max-width: 899px) { .home-split { grid-template-columns: 1fr; } } .sonderbau-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; display: flex; flex-direction: column; } .sonderbau-card--solo { max-width: 760px; } /* Verweis zum Hauptauftritt am Fuss der Beweis-Karte */ .sonderbau-card__tomain { margin: 14px 0 0; font-size: .88rem; } .sonderbau-card p { color: var(--ink-soft); margin: 0 0 18px; } /* Kompaktform in der Karte: engere Abstaende als die grossen Formulare */ .sonderbau-form { position: relative; } .sonderbau-form .form-field { margin-bottom: 10px; } .sonderbau-form .form-field label { font-size: .88rem; } .sonderbau-form input[type="text"], .sonderbau-form input[type="tel"], .sonderbau-form input[type="email"], .sonderbau-form textarea { width: 100%; padding: 9px 12px; font-size: .92rem; font-family: var(--font); border: 1px solid var(--line); border-radius: 6px; } .sonderbau-form .btn { width: 100%; } /* Home sections */ .notice-band { background: var(--brand-light); border-bottom: 1px solid var(--line); } .notice-band__text { margin: 0; padding: 14px 20px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); max-width: 78ch; } .notice-band__text strong { color: var(--brand-dark); } /* Desktop: volle Breite in zwei Spalten — halb so hoch, Zeilen bleiben lesbar */ @media (max-width: 899px) { .notice-band__cols .notice-band__text + .notice-band__text { padding-top: 0; } } @media (min-width: 900px) { .notice-band__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; padding: 4px 0; } .notice-band__cols .notice-band__text { max-width: none; padding: 12px 0; } } .home-section { padding: 44px 0; } .home-section--alt { background: var(--surface-alt); } .home-section--bestseller { padding-top: 32px; padding-bottom: 8px; } .home-section__more { font-weight: 700; white-space: nowrap; } .home-section__more-mobile { display: none; margin: 18px 0 0; } .home-section__more-mobile .btn { width: 100%; text-align: center; } @media (max-width: 600px) { .home-section__more { display: none; } .home-section__more-mobile { display: block; } .home-section--bestseller { padding-bottom: 28px; } } .home-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .home-section__head .section-title { margin: 0 0 16px; } .home-section__more { font-weight: 600; font-size: .9rem; white-space: nowrap; } /* CTA band */ .cta-band { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; } .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 40px 20px; flex-wrap: wrap; } .cta-band h2 { margin: 0 0 8px; font-size: 1.5rem; } .cta-band p { margin: 0; max-width: 640px; opacity: .95; } /* Der weisse Knopf im blauen Band braucht seine Textfarbe AUCH im Hover: .btn--primary:hover setzt color:##fff und steht spaeter im Stylesheet — sonst weisse Schrift auf fast weissem Grund. Hover-Ton zudem deutlicher als das vorherige ##eef6ff, das kaum von Weiss zu unterscheiden war. */ .cta-band .btn--primary { background: #fff; color: var(--brand-dark); } .cta-band .btn--primary:hover { background: #cfe0ef; color: var(--brand-dark); } /* Account teaser */ .account-teaser { display: flex; justify-content: space-between; gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; flex-wrap: wrap; } .account-teaser__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .account-teaser__list li { padding-left: 26px; position: relative; font-size: .95rem; } .account-teaser__list li::before { content: '→'; position: absolute; left: 0; color: var(--brand); font-weight: 700; } .account-teaser__actions { display: flex; gap: 10px; flex-shrink: 0; } /* -------------------------------------------------------------------------- Page scaffold -------------------------------------------------------------------------- */ .page { padding: 32px 0 64px; } .page-title { font-size: 1.7rem; margin: 8px 0 20px; } .section-title { font-size: 1.35rem; margin: 36px 0 16px; } .crumbs { font-size: .88rem; color: var(--muted); margin: 4px 0 12px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--brand); } .crumbs__sep { margin: 0 6px; opacity: .6; } .crumbs__here { color: var(--ink-soft); font-weight: 600; } .prose { max-width: 860px; } .prose h1, .prose h2 { line-height: 1.25; } /* -------------------------------------------------------------------------- Category & product grids -------------------------------------------------------------------------- */ .category-grid, .product-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 20px 0; } .category-card, .product-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; color: var(--ink); } .category-card:hover, .product-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand); transform: translateY(-2px); color: var(--ink); } .category-card__img, .product-card__img { display: block; aspect-ratio: 1 / 1; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); } .category-card__img img, .product-card__img img { max-width: 88%; max-height: 88%; object-fit: contain; } .category-card__img--empty, .product-card__img--empty { background: var(--surface-alt); } .category-card__title { padding: 14px 16px; font-weight: 700; font-size: .98rem; color: var(--brand); overflow-wrap: break-word; hyphens: auto; } /* Kategorie-Karten: Standard (z.B. Startseite) kompakt wie bisher, Beschreibung ausgeblendet. Auf Kategorieseiten (body.category-page) breit: 2 pro Reihe, Bild links, Titel + Kurzbeschreibung rechts — "wofuer + Nutzen" direkt in der Karte (SEO-Flaeche, Jonas 2026-08-03). */ .category-card__text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; } .category-card__title { padding: 0; } .category-card__desc { display: none; } .category-page .category-grid, .home .category-grid { grid-template-columns: repeat(2, 1fr); } .category-page .category-card, .home .category-card { flex-direction: row; } .category-page .category-card__img, .home .category-card__img { width: 148px; min-width: 148px; align-self: stretch; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); } .category-page .category-card__text, .home .category-card__text { padding: 16px 18px; justify-content: center; } .category-page .category-card__desc, .home .category-card__desc { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; font-weight: 400; } @media (max-width: 760px) { .category-page .category-grid, .home .category-grid { grid-template-columns: 1fr; } .category-page .category-card__img, .home .category-card__img { width: 110px; min-width: 110px; } } .product-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .product-card__title { font-weight: 600; font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; } .product-card__sku { font-size: .78rem; color: var(--muted); margin-top: -2px; } .product-card__price { color: var(--brand); font-weight: 700; } .product-card__price small { color: var(--muted); font-weight: 400; margin-left: 4px; } .product-card__gross { color: var(--muted); font-size: .84rem; margin-top: -2px; } /* -------------------------------------------------------------------------- Product detail -------------------------------------------------------------------------- */ .product-detail { display: grid; gap: 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-top: 8px; } .product-detail__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; } .product-detail__img--empty { background: var(--surface-alt); border-radius: var(--radius); } .product-detail__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .product-detail__thumbs img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: #fff; } .product-detail__thumbs img:hover { border-color: var(--brand); } .product-detail__title { font-size: 1.5rem; margin: 0 0 4px; line-height: 1.25; } .product-detail__sku { color: var(--muted); font-size: .88rem; margin-bottom: 18px; } .price-box { background: var(--brand-light); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px; } .price-box__net { font-size: 1.7rem; font-weight: 700; color: var(--brand-dark); } .price-box__netlabel { font-size: .95rem; font-weight: 600; color: var(--muted); } .price-box__note { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; } .price-box__sizenote { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); } .price-box__shipping { margin-top: 10px; font-size: .88rem; color: var(--muted); } .price-box__shipping--free { color: var(--success); font-weight: 600; } .price-box__delivery { margin-top: 4px; font-size: .88rem; color: var(--muted); } .lz-unavailable { color: var(--muted); font-size: .84rem; font-style: italic; } .product-detail__meta { color: var(--ink-soft); font-size: .92rem; margin-bottom: 18px; } /* Auswahl oben, Menge/Button in der Zeile darunter, Preisvorschau zuletzt */ .addtocart-form { display: block; } .addtocart-form__label { font-size: .88rem; font-weight: 600; color: var(--ink-soft); } .addtocart-form__row { display: flex; align-items: center; gap: 12px; } .addtocart-form__preview { margin: 10px 0 0; font-size: .92rem; } .addtocart-form__preview[hidden] { display: none; } .addtocart-form__line { display: block; } .addtocart-form__line[hidden] { display: none; } .addtocart-form__gross { color: var(--muted); } /* Konfigurierbare Optionen (Aufpreise) auf der Produktseite */ .prod-options { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 12px; margin: 0 0 16px; background: #fff; } .prod-options__legend { font-size: .9rem; font-weight: 700; padding: 0 6px; color: var(--ink); } .prod-options__row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 6px 0; } .prod-options__row input { margin-top: 3px; flex: none; } .prod-options__text { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; } .prod-options__label { font-weight: 600; font-size: .92rem; } .prod-options__price { font-weight: 700; color: var(--brand-dark); font-size: .92rem; white-space: nowrap; } .prod-options__note, .prod-options__hint { flex-basis: 100%; font-size: .84rem; color: var(--muted); margin: 0; } .prod-options__item { display: flex; align-items: flex-start; gap: 10px; } .prod-options__item .prod-options__row { flex: 1; } .prod-options__details { flex: none; margin-top: 6px; font-size: .84rem; font-weight: 600; white-space: nowrap; text-decoration: underline; } /* Detailfenster zu einer Option */ .opt-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 18px 50px rgba(0,0,0,.28); color: var(--ink); } .opt-dialog::backdrop { background: rgba(15,23,42,.55); } .opt-dialog__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .opt-dialog__title { margin: 0; font-size: 1.05rem; flex: 1; } .opt-dialog__close { flex: none; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; } .opt-dialog__close:hover { color: var(--ink); } .opt-dialog__body { padding: 18px; } .opt-dialog__img { display: block; max-width: 100%; height: auto; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: var(--radius); } .opt-dialog__sku { font-size: .88rem; color: var(--muted); margin: 0 0 10px; } .opt-dialog__text .prose { font-size: .92rem; } /* Sprachumschalter im Kopf */ .langswitch { display: flex; align-items: center; gap: 3px; font-size: .84rem; font-weight: 600; color: var(--muted); } .langswitch a { color: var(--muted); padding: 2px 3px; border-radius: 3px; } .langswitch a:hover { color: var(--brand); } .langswitch a.is-active { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; } .langswitch a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* Umzugsband ganz oben: Wiedererkennung fuer Stammkunden von rollwagen-shop.de */ .umzugsband { background: var(--brand-light); color: var(--brand-dark); } .umzugsband__inner { padding: 9px 20px; font-size: .9rem; line-height: 1.45; text-align: center; } @media (max-width: 600px) { .umzugsband__inner { font-size: .84rem; text-align: left; } } .umzugsband__link, .umzugsband a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .umzugsband__link { white-space: nowrap; } .umzugsband__link:hover, .umzugsband__link:focus-visible, .umzugsband a:hover, .umzugsband a:focus-visible { color: var(--brand); } .brake-note { margin: 12px 0 0; padding: 9px 12px; font-size: .84rem; line-height: 1.5; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--radius); } .contract-lang { margin: 12px 0 0; padding: 9px 12px; font-size: .84rem; line-height: 1.5; color: var(--ink-soft); background: var(--brand-light); border-left: 3px solid var(--brand); border-radius: 4px; } /* Sortierleiste ueber der Produktliste */ .sortbar { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .9rem; } .sortbar label { color: var(--muted); font-weight: 600; } .sortbar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-family: var(--font); font-size: .9rem; } .sortbar select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* Sortierbare Spaltenkoepfe */ table[data-sortable] th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; } table[data-sortable] th[data-sort]:hover { color: var(--brand); } table[data-sortable] th[data-sort]::after { content: " ↕"; opacity: .35; font-size: .85em; } table[data-sortable] th[aria-sort="ascending"]::after { content: " ▲"; opacity: 1; } table[data-sortable] th[aria-sort="descending"]::after { content: " ▼"; opacity: 1; } table[data-sortable] th[data-sort]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* Bild-Manager: Zahl und Datum brauchen keine halbe Tabelle */ .mini-table--images td, .mini-table--images th { vertical-align: middle; } .mini-table--images .mono { font-size: .82rem; } /* Verwaltung: alle Formularfelder im Stil des Kopf-Suchfelds (siehe .site-header__searchform input) — dunkler WCAG-Rand ##858f9c, 8px-Radius, Marken-Fokus (Jonas 2026-08-12). :where() haelt die Spezifitaet bei null, damit speziellere Regeln (Fehlerrahmen im Artikel-Formular, .img-search) weiterhin gewinnen. */ :where(.adminhome-page, .adminimages-page, .adminproducts-page, .adminorders-page, .versand-page, .commission-page, .dashboard-page, .lieferzeiten-page, .nutzung-page) :where(input[type=text], input[type=number], input[type=search], input:not([type]), select, textarea) { padding: 8px 12px; font-family: var(--font); font-size: .9rem; border: 1px solid #858f9c; border-radius: 8px; background: #fff; color: var(--ink); } :where(.adminhome-page, .adminimages-page, .adminproducts-page, .adminorders-page, .versand-page, .commission-page, .dashboard-page, .lieferzeiten-page, .nutzung-page) :where(input[type=text], input[type=number], input[type=search], input:not([type]), select, textarea):focus { outline: 2px solid var(--brand); outline-offset: -1px; } /* Sammel-Setzen auf der Lieferzeiten-Seite */ .lz-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .lz-bulk label { font-size: .9rem; font-weight: 600; } .lz-bulk__hint { font-size: .78rem; color: var(--muted); } /* Artikel-Formular in der Verwaltung */ .artikel-form .dash-card { margin-bottom: 18px; } .artikel-form .dash-card__head h2 { font-size: 1.02rem; } .artikel-form label { font-size: .92rem; font-weight: 600; } /* Erklaerungen sind Beiwerk — deutlich kleiner als die Beschriftung */ .artikel-form .form-field__hint { font-size: .78rem; line-height: 1.4; margin-top: 3px; } /* Volle Breite fuer die Formularspalten; Rahmen, Radius und Fokus kommen aus der gemeinsamen Verwaltungs-Feldregel weiter oben (Kopf-Suchfeld-Stil). */ .artikel-form input[type=text], .artikel-form input:not([type]), .artikel-form select, .artikel-form textarea { width: 100%; } .form-field__fehler { display: block; margin-top: 4px; font-size: .82rem; color: #b91c1c; font-weight: 600; } /* Fehlender, aber wichtiger Wert: auffaellig, ohne wie ein Fehler zu wirken */ .form-field__fehlt { display: block; margin-top: 4px; font-size: .82rem; color: #92400e; font-weight: 600; } /* Die Rahmenfarben der Zustaende stehen weiter unten, direkt hinter der Grundregel fuer Felder - sonst gewinnt bei gleicher Spezifitaet die spaetere Grundregel und der Fehlerrahmen bleibt unsichtbar. */ .form-check--aus { opacity: .55; } /* Kategorien: nach Oberkategorie gruppiert, Gruppen brechen nicht um */ .kat-liste { columns: 3 240px; column-gap: 26px; } .kat-gruppe { break-inside: avoid; page-break-inside: avoid; margin: 0 0 14px; } .kat-gruppe__titel { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line); } .kat-liste .form-check { margin: 0; padding: 3px 0; font-size: .92rem; align-items: flex-start; } .kat-liste .form-check--kind span { padding-left: 14px; } .rep-zeile { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: #fbfcfd; } .rep-zeile .form-row:last-of-type { margin-bottom: 8px; } /* Bild-Manager, Produktliste: das 44er Vorschaubild beim Darueberfahren gross zeigen. Nur hier — in der Detailansicht stehen die Bilder ohnehin schon in der Groesse des Online-Shops (siehe .img-manager weiter unten). transform-origin links, damit die Lupe ins Tabellenfeld hinein aufgeht und nicht ueber den linken Fensterrand hinaus. */ .img-mini { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 4px; transition: transform .14s ease, box-shadow .14s ease; transform-origin: left center; } .img-mini:hover, .img-mini:focus-visible { transform: scale(6); position: relative; z-index: 60; box-shadow: 0 8px 32px rgba(0,0,0,.3); border-radius: 6px; } /* Hinweis-Faehnchen in der Artikelliste */ .flag { display: inline-block; padding: 2px 7px; border-radius: 4px; margin: 1px 0; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .flag--warn { background: #fef3c7; color: #92400e; } .flag--info { background: #dbeafe; color: #1e40af; } .flag--off { background: #fee2e2; color: #991b1b; } /* Zugang zur Verwaltung in der Kopfleiste — nur fuer Berechtigte sichtbar */ .header-link--verwaltung { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 4px 12px; font-weight: 600; white-space: nowrap; } .header-link--verwaltung:hover, .header-link--verwaltung:focus-visible { background: rgba(255,255,255,.16); border-color: #fff; } /* Kacheln auf der Verwaltungs-Startseite */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 8px 0 0; } .tool-card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; } .tool-card:hover, .tool-card:focus-visible { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,.06); } .tool-card__title { display: block; font-weight: 700; font-size: 1.06rem; margin-bottom: 4px; } .tool-card__text { display: block; font-size: .9rem; color: var(--muted); line-height: 1.45; } /* Gruppen auf der Uebersicht: Ueberschrift + farbiger Reiter je Karte (19.08.2026). Farben: Katalog blau (Hausfarbe), Verkauf gruen, Auswertung violett, System grau. */ .tool-group__title { margin: 22px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .tool-group__title:first-of-type { margin-top: 10px; } /* Online-Handbuch: Inhalt links (klebt), Abschnitte rechts */ .hb { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; } .hb__toc { position: sticky; top: 130px; font-size: .9rem; } .hb__toc ol { margin: 8px 0 0; padding-left: 20px; } .hb__toc li { margin: 3px 0; } /* Sprungziele unter dem klebenden Kopf freihalten: sonst landet die Ueberschrift hinter Header + Leiste */ .hb__sec { scroll-margin-top: 150px; } .admin-handbuch-page { scroll-behavior: smooth; } .hb__sec h2 { margin: 0 0 8px; font-size: 1.15rem; } .hb__sec h2 small { font-size: .82rem; font-weight: 500; margin-left: 8px; } .hb__sec p, .hb__sec li { font-size: .94rem; line-height: 1.55; } .hb__sec ul { margin: 6px 0 0; padding-left: 20px; } .hb__sec li { margin: 4px 0; } .hb__tip { margin-top: 10px; padding: 8px 12px; background: var(--brand-light, #eef4fb); border-radius: 6px; } .hb__fb { margin: 12px 0 0; text-align: right; } .hb__fb .btn { font-size: .78rem; } @media (max-width: 800px) { .hb { grid-template-columns: 1fr; } .hb__toc { position: static; } } .tool-group__title--katalog { color: #005794; } .tool-group__title--verkauf { color: #047857; } .tool-group__title--auswertung { color: #6d28d9; } .tool-group__title--system { color: #6b7280; } .tool-card { position: relative; overflow: hidden; padding-top: 34px; } .tool-card__tab { position: absolute; top: 0; left: 0; padding: 2px 10px 3px; border-radius: 0 0 8px 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--brand); } .tool-card--katalog .tool-card__tab { background: #005794; } .tool-card--verkauf .tool-card__tab { background: #047857; } .tool-card--auswertung .tool-card__tab { background: #6d28d9; } .tool-card--system .tool-card__tab { background: #6b7280; } .tool-card--katalog:hover { border-color: #005794; } .tool-card--verkauf:hover { border-color: #047857; } .tool-card--auswertung:hover { border-color: #6d28d9; } .tool-card--system:hover { border-color: #6b7280; } /* Navigationsleiste der internen Werkzeuge: kleine Ueberschrift oben, darunter die Knoepfe links und — hinter einem Trennstrich — rechts, wer angemeldet ist (Jonas 2026-08-12). */ .tools-nav { margin: 0 0 20px; padding: 8px 14px; background: var(--brand-light, #eef4fb); border: 1px solid var(--line); border-radius: 8px; } .tools-nav__label { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .tools-nav__row { display: grid; grid-template-columns: repeat(4, minmax(150px, max-content)) 1fr; column-gap: 56px; row-gap: 4px; align-items: start; } /* Fuenf Spalten (Jonas 19.08.2026): Katalog | Verkauf | Auswertung | System | Angemeldet — Gruppenname oben, die Verweise darunter untereinander. Ein festes Raster, nichts fliesst, nichts springt. */ .tools-nav__groups { display: contents; } .tools-nav__group { display: flex; flex-direction: column; gap: 2px; } .tools-nav__group-title { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .tools-nav__list { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; } .tools-nav__link { display: inline-block; padding: 1px 6px; margin: 0 -6px; border: 0; border-radius: 3px; background: none; color: var(--ink-soft, #374151); text-decoration: none; font-size: .9rem; font-weight: 500; line-height: 1.5; } .tools-nav__link:hover, .tools-nav__link:focus-visible { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } /* aktiv: dunkelblau hinterlegt, weisse Schrift, gleiche Schriftstaerke wie die anderen */ .tools-nav__link.is-active { background: var(--brand-dark, var(--brand)); color: #fff; font-weight: 500; text-decoration: none; } /* Das CMS ist kein Shop-Werkzeug, sondern der Unterbau — optisch abgesetzt. */ .tools-nav__cms .tools-nav__link { color: var(--muted); font-weight: 500; } /* Wer ist angemeldet: ganz rechts, ruhig, aber lesbar */ .tools-nav__wer { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.4; padding-left: 16px; border-left: 1px solid var(--line); } .tools-nav__wer-key { font-size: .74rem; color: var(--muted); } .tools-nav__name { font-size: .88rem; font-weight: 700; } .tools-nav__rolle { font-size: .8rem; color: var(--ink-soft, #374151); } @media (max-width: 640px) { .tools-nav__row { grid-template-columns: 1fr 1fr; } .tools-nav__wer { justify-self: start; align-items: flex-start; border-left: 0; padding-left: 0; grid-column: 1 / -1; } } /* Bezugsrahmen fuer alles, was ueber dem Foto liegt. Ohne diesen Kasten haengen die Schalter unten an der ganzen Kachel und legen sich damit ueber die Knopfleiste (Hauptbild, Verschieben, Loeschen) - die war dadurch nicht mehr anklickbar. Sie sollen das Bild ueberlagern, nicht die Bedienung. */ .img-tile__media { position: relative; } /* Bremsen-Markierung je Bild im Bild-Manager */ .img-tile__brake { position: absolute; left: 6px; bottom: 6px; margin: 0; } .img-brake { border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--muted); font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; cursor: pointer; } .img-brake:hover { border-color: var(--brand); color: var(--brand); } .img-brake--alt { background: #fef3c7; border-color: #f59e0b; color: #92400e; } /* Zubehoer, das auf dem Foto montiert ist (Stapleraufnahme, Reflexmarkierung) */ .img-tile__opts { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .img-tile__opts form { margin: 0; } .img-opt { border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--muted); font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; cursor: pointer; } .img-opt:hover { border-color: var(--brand); color: var(--brand); } .img-opt--on { background: #dbeafe; border-color: #3b82f6; color: #1e40af; } /* Sammel-Upload im Bild-Manager */ .bulk-hint { margin: 14px 0 0; font-size: .88rem; color: var(--muted); } .bulk-hint ul { margin: 6px 0 10px; padding-left: 20px; } .bulk-hint li { margin-bottom: 4px; } .bulk-hint code { background: #f1f5f9; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: .86rem; color: var(--ink); } .bulk-bad { color: #b91c1c; font-weight: 600; } .prod-options__hint { margin-top: 6px; } .prod-options__total { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .92rem; } .prod-options__total[hidden] { display: none; } .prod-options__gross { color: var(--muted); } /* gewaehlte Optionen unter der Warenkorbzeile */ .cart-item__options { list-style: none; margin: 4px 0 0; padding: 0; font-size: .84rem; color: var(--muted); } .cart-item__options li { margin-top: 2px; } .cart-item__optsku { font-family: var(--mono, ui-monospace, monospace); } /* volle Breite der Preisbox darueber (Jonas 2026-08-04) — vorher 360px, dadurch brach die Preiszeile unnoetig um */ .size-form { display: flex; flex-direction: column; gap: 12px; } .size-form__row { display: flex; gap: 14px; } .size-form__row .form-field { margin-bottom: 0; } /* .cart-qty (64px) steht spaeter im Stylesheet und gewann bei gleicher Spezifitaet — daher der Verbund-Selektor. 130px fasst "1200" + Spinner. */ .size-form .size-form__length { width: 130px; } .size-form__preview { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: .95rem; color: var(--ink-soft); } .size-form__subtotal { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); } /* MUSS nach der Regel oben stehen: display:block wuerde sonst das hidden-Attribut ueberstimmen (Browser-Standard ist nur display:none), dann bliebe die Zwischensumme bei Menge 1 stehen. */ .size-form__subtotal[hidden] { display: none; } .size-form__gross { color: var(--muted); } .size-form__preview strong { color: var(--brand-dark); font-size: 1.1rem; } .size-form .btn { align-self: flex-start; } .product-detail__cta { margin: 6px 0 18px; } .product-detail__ctanote { color: var(--muted); font-size: .86rem; margin: 8px 0 0; } .product-detail__summary { color: var(--ink-soft); } .btn { display: inline-block; border: 0; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 1rem; padding: 13px 28px; border-radius: 8px; transition: background .15s ease; } .btn--primary { background: var(--brand); color: #fff; } /* color:##fff auch im Hover: das globale a:hover (Spezifitaet 0,1,1) schlaegt sonst .btn--primary (0,1,0) und faerbt den Text blau auf blau */ .btn--primary:hover { background: var(--brand-dark); color: #fff; } /* war #9db8cc: weisser Text darauf nur 2,07:1 — als "deaktiviert" erkennbar, aber kaum lesbar. #6b8296 bleibt eindeutig inaktiv und erreicht 4,0:1. */ .btn--primary:disabled { background: #6b8296; cursor: not-allowed; } .product-features { margin-top: 36px; } .features-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .features-table th, .features-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; } .features-table tr:last-child th, .features-table tr:last-child td { border-bottom: 0; } .features-table th { width: 40%; color: var(--ink-soft); font-weight: 600; background: var(--surface-alt); } .product-description { margin-top: 36px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ /* Fusszeile im Henselblau wie der Hauptauftritt (dort bg-henselblue). Textfarben aus dessen Fusszeile: sky-100 fuer Flaechentext, sky-200 fuer die Bottom-Zeile - sky-200 voll deckend liegt bei 5,67:1 auf dem Blau. */ .site-footer { background: var(--brand); color: #e0f2fe; font-size: .9rem; margin-top: 48px; } .site-footer a { color: #bae6fd; } .site-footer a:hover { color: #fff; } .site-footer__h { color: #fff; margin: 0 0 10px; font-size: .95rem; } .site-footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 40px 20px; } .site-footer__links { list-style: none; margin: 0 0 12px; padding: 0; } .site-footer__links li { margin-bottom: 6px; } .site-footer__h a { color: #fff; } .site-footer__h a:hover { text-decoration: underline; } /* Links in Fusszeilen-Absaetzen stehen durch
dicht uebereinander (E-Mail ueber Web-Adresse, Telefon ueber Oeffnungszeiten). Auf dem Handy trifft man dann daneben — WCAG 2.5.8 verlangt 24 px Zielhoehe. */ .site-footer p { line-height: 1.8; } .site-footer p a { display: inline-block; padding: 3px 0; } .site-footer__b2b { font-size: .86rem; opacity: .85; } /* zweite Ueberschrift innerhalb einer Spalte braucht Luft nach oben */ .site-footer__h--second { margin-top: 22px; } /* Nur fuer Screenreader: Label sichtbar ausblenden, aber vorlesbar lassen */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.25); padding: 14px 0; font-size: .86rem; color: #bae6fd; } .site-footer__bottomrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; } /* margin-left:auto statt nur space-between: rueckt den Credit auch dann nach rechts, wenn die Zeile umbricht, und haelt ihn vom Copyright ab. */ .site-footer__credit { margin-left: auto; text-align: right; } /* Interne Werkzeugleiste (nur angemeldete Admins/Redaktion) */ .site-footer__tools { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-left: 10px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.3); } .site-footer__tools strong { color: #fff; font-weight: 600; } .site-footer__tools a { text-decoration: underline; } .site-footer__credit a { white-space: nowrap; } /* -------------------------------------------------------------------------- Cart & checkout -------------------------------------------------------------------------- */ .cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .cart-table th, .cart-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; vertical-align: middle; } .cart-table th { background: var(--surface-alt); color: var(--ink-soft); font-size: .88rem; } .cart-table td.num, .cart-table th.num { text-align: right; white-space: nowrap; } .cart-item { display: flex; align-items: center; gap: 12px; } .cart-item__img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; flex-shrink: 0; } .cart-item__title { font-weight: 600; } .cart-item__sku { color: var(--muted); font-size: .86rem; } .cart-qty { width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font); font-size: .95rem; text-align: center; } .cart-remove { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.1rem; padding: 6px; } .cart-remove:hover { color: #b91c1c; } /* Bild-Manager: Filterzeile und sortierbare Spaltenkoepfe */ .img-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .img-search input[type=text] { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid #858f9c; border-radius: 6px; font-family: var(--font); font-size: .95rem; } .img-search select { padding: 9px 12px; border: 1px solid #858f9c; border-radius: 6px; font-family: var(--font); font-size: .95rem; background: #fff; } .img-sort { color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .img-sort:hover { color: var(--brand); text-decoration: underline; } /* Warenkorb auf schmalen Schirmen: Tabelle wird zu Karten. Ohne das stapeln sich Stueckpreis, Menge und Summe unbeschriftet untereinander ("38,11 € / 3 / 114,33 €") — niemand weiss, welche Zahl was ist. Beschriftungen kommen aus den data-label-Attributen der Zellen. */ @media (max-width: 700px) { .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; } .cart-table { border: 0; background: none; } .cart-table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; padding: 12px 14px; position: relative; background: var(--surface); } .cart-table td { border: 0; padding: 5px 0; text-align: left; } .cart-table td:first-child { padding-right: 36px; padding-bottom: 10px; } .cart-table td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px dashed var(--line); padding: 9px 0; } .cart-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .86rem; font-weight: 600; } .cart-table td.num { text-align: right; white-space: nowrap; } .cart-table td:last-child { position: absolute; top: 8px; right: 10px; padding: 0; width: auto; } .cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 1.2rem; } .cart-item__img { width: 64px; height: 64px; } } /* Unter der Tabelle: links Zubehoer-Vorschlaege, rechts die Summe */ .cart-below { display: flex; gap: 24px; align-items: flex-start; margin-top: 24px; } .cart-below .cart-summary { margin-top: 0; flex: 0 0 420px; } .cart-accessories { flex: 1 1 auto; min-width: 0; } .cart-accessories__title { font-size: 1.05rem; margin: 6px 0 10px; } .cart-accessories .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; } .cart-accessories .product-card__title { font-size: .85rem; } .cart-accessories .product-card__gross, .cart-accessories .product-card__sku { display: none; } @media (max-width: 860px) { .cart-below { flex-direction: column-reverse; } .cart-below .cart-summary { flex: none; width: 100%; max-width: none; } } .cart-summary { margin-top: 24px; margin-left: auto; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .cart-summary__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: .95rem; } .cart-summary__row--muted { color: var(--muted); font-size: .88rem; } .cart-summary__row--total { border-top: 2px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 1.1rem; } .cart-summary__free { color: var(--success); font-weight: 600; } .cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; } .cart-empty { text-align: center; padding: 64px 20px; color: var(--muted); } .btn--ghost { background: none; border: 1px solid var(--line); color: var(--ink-soft); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand); } .btn--sm { padding: 9px 16px; font-size: .88rem; } /* Checkout form */ .checkout-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; } .form-card h3 { margin: 0 0 16px; font-size: 1.05rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field { margin-bottom: 14px; } .form-field label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; } /* password/number/search fehlten hier (Jonas 2026-08-03): Passwortfelder blieben unformatiert und schmal — und sprangen auf volle Breite, sobald der Anzeigen-Schalter den Typ auf text wechselte. */ /* input:not([type]) gehoert zwingend dazu: ein ohne type-Attribut verhaelt sich wie text, trifft aber [type=text] nicht — eine Attributauswahl greift bei fehlendem Attribut nicht. Fast alle Felder im Artikelformular sind ohne type geschrieben und fielen deshalb auf den eingelassenen 3-D-Rahmen des Browsers zurueck. */ .form-field input[type=text], .form-field input[type=email], .form-field input[type=tel], .form-field input[type=password], .form-field input[type=number], .form-field input[type=search], .form-field input:not([type]), .form-field textarea, .form-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font); font-size: .95rem; background: #fff; color: var(--ink); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); } /* Zustaende stehen hinter der Grundregel und wiederholen .form-field, damit sie diese ueberhaupt schlagen: die Grundregel kommt durch :not([type]) auf 0-2-1, ein blosses .form-field--fehler input nur auf 0-1-1 und bliebe wirkungslos. */ .artikel-form input[readonly], .form-field input[readonly] { background: #f1f3f5; color: var(--muted); } .form-field.form-field--fehler input, .form-field.form-field--fehler select, .form-field.form-field--fehler textarea { border-color: #b91c1c; } .form-field.form-field--fehlt input { border-color: #f59e0b; background: #fffbeb; } .form-field--required label::after { content: ' *'; color: #b91c1c; } .form-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: .92rem; } .form-check input { margin-top: 3px; } .form-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; } .form-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; } /* Dritter Zustand neben ok und error: gespeichert, aber vermutlich wirkungslos. Eine Bruecke, deren Katalogbegriff nichts findet, ist kein Fehler — sie steht in der Tabelle — sieht aber erledigt aus und ist es nicht. Gelb statt gruen oder rot, damit der Unterschied auf einen Blick da ist. */ .form-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; } .auth-wrap { max-width: 440px; margin: 0 auto; } .auth-wrap--wide { max-width: 620px; } .auth-alt { text-align: center; margin-top: 16px; color: var(--muted); font-size: .92rem; } .account-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 600; font-size: .88rem; } .account-link:hover { color: var(--brand); } /* Bestaetigung "In den Warenkorb gelegt" auf der Produktseite (statt Sprung in den Warenkorb) */ .added-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--radius); font-size: .95rem; } .added-note__text { color: var(--success); font-weight: 600; flex: 1 1 auto; } .added-note .btn { padding: 8px 16px; } .added-note__link { font-weight: 600; white-space: nowrap; } .list-share { margin-bottom: 18px; } .list-share__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .list-share__url { flex: 1 1 320px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font); font-size: .9rem; color: var(--ink-soft); background: var(--surface-alt); } /* Verwaltung: Angebote nachverfolgen */ .aq-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; } .aq-inline input[type=text] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font); font-size: .85rem; min-width: 150px; } .aq-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } .aq-filter__link { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); } .aq-filter__link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } /* Statistik: Quelle-/Zeitraum-Filter ueber den KPI-Karten */ .dash-filter { margin: 4px 0 14px; } .dash-filter .aq-filter { align-items: center; margin-bottom: 8px; } .dash-filter__label { font-size: .85rem; color: var(--muted); min-width: 72px; } /* Kategorien-Editor: Artikelliste mit Kaestchen */ .kat-filter { margin: 0 0 8px; } .kat-filter input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font); font-size: .9rem; } .kat-list { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 0; } .kat-item { display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; cursor: pointer; font-size: .92rem; } .kat-item:hover { background: var(--surface-alt); } .kat-item--muted .kat-item__name { color: var(--muted); } .kat-item__name { flex: 1; } /* Wunsch-Rollwagen-Anfragen: Karten mit Bildleiste */ .wr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .wr-card { display: flex; flex-direction: column; gap: 10px; } .wr-card__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wr-card__contact { font-size: .86rem; text-align: right; } .wr-card__images { display: flex; gap: 8px; flex-wrap: wrap; } .wr-card__images a { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #f4f4f4; } .wr-card__images img { display: block; height: 130px; width: auto; max-width: 220px; object-fit: cover; } .wr-card__noimg { margin: 0; } .wr-card__text summary { cursor: pointer; font-weight: 600; font-size: .9rem; } .wr-card__text p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); } .aq-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-alt); color: var(--ink-soft); } .aq-pill--online { background: #ecfdf5; color: var(--success); } .aq-pill--offline { background: #eff6ff; color: var(--brand); } .aq-pill--abgelaufen { background: #fef2f2; color: #991b1b; } .aq-pill--offen { background: #fffbeb; color: #92400e; } .cart-summary__row--nudge { color: var(--brand); font-weight: 600; background: var(--brand-light); margin: 6px -8px; padding: 8px; border-radius: 6px; } .tool-card__count { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--brand-light); color: var(--brand); font-size: .78rem; font-weight: 700; vertical-align: middle; } .bo-export { margin-bottom: 16px; } .bo-export summary { cursor: pointer; } .bo-export__form { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 12px; } .bo-export__form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ink-soft); } .bo-export__form input, .bo-export__form select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--font); font-size: .9rem; } /* Merken-Popover auf der Produktseite: Link-Knopf mit Lesezeichen, darunter ein Panel mit Haekchen je Liste, "+ Neue Liste" und Abbrechen/Fertig. */ .merken { position: relative; margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .merken__toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; line-height: 1; cursor: pointer; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--brand); } .merken__toggle:hover { color: var(--brand-dark); } .merken__toggle.is-saved .merken__icon path { fill: currentColor; } /* gleiche Schriftgroesse/-hoehe wie der Knopf-Text, sonst laufen die Grundlinien auseinander */ .merken__done { font-size: 1rem; line-height: 1; padding: 4px 0; color: var(--success); font-weight: 600; } .merken__pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px)); background: var(--surface); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); overflow: hidden; } .merken__pop[hidden] { display: none; } .merken__lists { list-style: none; margin: 0; padding: 8px 0; max-height: 240px; overflow-y: auto; } .merken__item { display: flex; align-items: center; gap: 14px; padding: 10px 24px; cursor: pointer; font-size: 1.02rem; } .merken__item:hover { background: var(--surface-alt); } .merken__item input { width: 20px; height: 20px; margin: 0; accent-color: var(--brand); flex: none; } .merken__empty { padding: 12px 24px; color: var(--muted); font-size: .92rem; } .merken__new { padding: 4px 24px 12px; } .merken__new input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font); font-size: .95rem; } .merken__new[hidden] { display: none; } .merken__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 24px; border-top: 1px solid var(--line); } .merken__foot .btn { padding: 8px 16px; } .merken__foot .btn--ghost { margin-left: auto; } .merken__link { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--brand); } .merken__link:hover { color: var(--brand-dark); } .mlist { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; } .mlist__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mlist__actions { margin-left: auto; display: flex; gap: 8px; } .mlist__items { list-style: none; margin: 10px 0 0; padding: 0; } .mlist__items li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .92rem; } .mlist__name { flex: 1; } .mlist__name em { color: var(--muted); font-size: .86rem; } .mlist__meta { color: var(--muted); font-size: .86rem; font-family: ui-monospace, Menlo, monospace; } .mlist__remove { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 2px 6px; } .mlist__remove:hover { color: #b91c1c; } .mlist__new { display: flex; gap: 8px; margin-top: 14px; } /* Quote / order document */ .doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 820px; } .doc__head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--brand); padding-bottom: 18px; margin-bottom: 20px; } .doc__from { color: var(--muted); font-size: .86rem; margin: 8px 0 0; } .doc__meta h2 { margin: 0 0 8px; color: var(--brand); font-size: 1.3rem; } .doc__meta table td { padding: 2px 0; font-size: .88rem; } .doc__meta table td:first-child { color: var(--muted); padding-right: 14px; } .doc__addr { margin: 18px 0 24px; font-size: .95rem; line-height: 1.5; } .doc__items { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .doc__items th { text-align: left; font-size: .84rem; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line); padding: 6px 8px; } .doc__items th.num { text-align: right; } .doc__items td { padding: 8px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; } .doc__items td.num { text-align: right; white-space: nowrap; } .doc__items td.mono { font-family: ui-monospace, Menlo, monospace; font-size: .86rem; } .doc__totals { max-width: 320px; margin-left: auto; } .doc__notes { margin-top: 16px; font-size: .9rem; } .doc__terms { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.5; } .doc-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.5; color: var(--muted); } .doc-footer strong { color: var(--ink-soft); } @media print { .doc-footer { break-inside: avoid; margin-top: 20px; border-top-color: #999; } .doc { border: 0; padding: 0; max-width: 100%; box-shadow: none; } .doc__head { border-bottom: 2px solid var(--brand); break-inside: avoid; } .doc__items thead th { background: var(--surface-alt); } .doc__totals { break-inside: avoid; } .doc__terms { break-inside: avoid; } } .order-confirm { text-align: center; padding: 48px 20px; } .order-confirm__no { font-size: 1.5rem; font-weight: 700; color: var(--brand); margin: 12px 0; } .order-confirm__check { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: var(--success); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; } /* -------------------------------------------------------------------------- Admin dashboard -------------------------------------------------------------------------- */ .dash-gate { display: flex; justify-content: center; padding: 60px 20px; } .dash-gate__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; text-align: center; max-width: 420px; color: var(--muted); box-shadow: var(--shadow-sm); } .dash-gate__card svg { color: var(--brand); } .dash-gate__card h1 { color: var(--ink); font-size: 1.4rem; margin: 12px 0 8px; } .dash-gate__card .btn { margin-top: 16px; } .dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .dash-sub { color: var(--muted); font-size: .88rem; margin: 0; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; } .kpi--accent { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-color: transparent; } .kpi--muted { background: var(--surface-alt); border-style: dashed; } .kpi--accent .kpi__label, .kpi--accent .kpi__hint { color: rgba(255,255,255,.8); } .kpi--accent .kpi__value { color: #fff; } .kpi__label { font-size: .86rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; } .kpi__value { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; } .kpi__hint { font-size: .86rem; color: var(--muted); } .dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; } .dash-card__head { margin-bottom: 14px; } .dash-card__head h2 { font-size: 1.05rem; margin: 0; } .dash-card__head small { color: var(--muted); font-weight: 400; font-size: .86rem; } .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .dash-cols .dash-card { margin-bottom: 0; } /* Das Raster traegt seinen Abstand nach unten SELBST, wie .dash-card auch. Vorher hing er an Geschwisterpaaren (.dash-cols + .dash-cols), und alles andere dahinter — eine einzelne Karte, ein Formular — klebte daran fest. Angrenzende Aussenabstaende fallen zusammen, zwischen zwei Rastern bleiben es also weiterhin 20 px (Jonas 2026-08-07, dritte Abstandskorrektur). */ .dash-cols { margin-bottom: 20px; } .dash-cols + .dash-cols { margin-top: 20px; } .dash-empty { color: var(--muted); font-size: .9rem; padding: 8px 0; } /* Knoepfe in den Werkzeugen brauchen IMMER Luft (Jonas 2026-08-07). Ein Speichern-Knopf, der direkt am Hinweistext oder an der Tabelle darueber klebt, sieht nach Versehen aus und wird schlechter getroffen. Als Regel statt als style="" an jeder Stelle, damit es fuer jedes neue Werkzeug von selbst gilt und niemand daran denken muss. */ .dash-card > .btn, .dash-card > form > .btn, .dash-card > p + .btn, .dash-card > table + .btn { margin-top: 18px; } .dash-card > .btn + .btn { margin-left: 10px; } /* Dasselbe vor Tabellen und Kartenrastern (Jonas 2026-08-07). Ein Einleitungssatz, an dem die Tabelle unmittelbar klebt, liest sich als Tabellenkopf statt als Erklaerung — der Satz gehoert optisch zur Ueberschrift, nicht zu den Daten. */ /* Handlungszeile in den Werkzeugen: Knopf links, erklaerender Hinweis rechts auf gleicher Hoehe. Der Hinweis erklaert die Eingabe und gehoert deshalb neben den Knopf, nicht als Fliesstext darueber. Auf schmalen Schirmen rutscht er unter den Knopf, statt ihn zu quetschen. */ .tool-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 18px; } .tool-actions .btn { margin-top: 0; } .tool-hint { margin: 0; max-width: 46ch; color: var(--muted); font-size: .82rem; line-height: 1.45; background: var(--surface-soft, #f6f7f8); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; } /* Der Einleitungssatz direkt unter der Seitenueberschrift bekommt seinen Abstand SELBST — nicht das Element darunter. Vorher hingen die Regeln an dem, was folgte (.dash-cols, .dash-card, table), und auf der Versandseite folgt ein
: die Regel griff nicht, der Satz klebte weiter an der Karte. Am Absatz selbst ist es egal, was danach kommt. */ .page-title + .dash-sub { margin-bottom: 18px; } .dash-sub + .dash-cols, .dash-sub + .dash-card, .dash-sub + form, .dash-sub + table, .dash-sub + .mini-table, .dash-card > p + table, .dash-card > p + .mini-table { margin-top: 18px; } .dash-foot { color: var(--muted); font-size: .86rem; margin-top: 22px; } .chart-wrap { width: 100%; overflow-x: auto; } .bar-chart { width: 100%; height: 240px; display: block; } .bar-chart .bar { fill: var(--brand); transition: fill .12s ease; } .bar-chart .bar:hover { fill: var(--brand-dark); } .bar-chart .bar-label { fill: var(--muted); font-size: 13px; font-family: var(--font); } .rank-list { list-style: none; margin: 0; padding: 0; } .rank-list li { position: relative; padding: 9px 12px; border-radius: 6px; margin-bottom: 3px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; overflow: hidden; } .rank-list__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-light); z-index: 0; border-radius: 6px; } .rank-list__bar--alt { background: #eef6ee; } .rank-list__name { position: relative; z-index: 1; font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-list__val { position: relative; z-index: 1; color: var(--ink-soft); font-size: .86rem; white-space: nowrap; flex-shrink: 0; } .chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; gap: 6px; align-items: baseline; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: .88rem; color: var(--ink-soft); } .chip--sm { font-size: .75rem; padding: 1px 8px; } .wr-card__contact-table { border-collapse: collapse; font-size: .88rem; } .wr-card__contact-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 1px 12px 1px 0; white-space: nowrap; } .wr-card__contact-table td { padding: 1px 0; } .wr-card__status { margin: 0; } .wr-card__mail { margin-top: 4px; } .wr-ok { color: #047857; font-weight: 700; } .wr-bad { color: #b91c1c; font-weight: 700; } .wr-status { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font); font-size: .82rem; font-weight: 600; background: #fff; } .wr-status--neu { border-color: #b91c1c; color: #b91c1c; } .wr-status--bearbeitet { border-color: #b45309; color: #b45309; } .wr-status--wartet { border-color: #6b7280; color: #6b7280; } .wr-status--angebot { border-color: #1d4ed8; color: #1d4ed8; } .wr-status--auftrag { border-color: #047857; color: #047857; } .wr-card__forward summary { cursor: pointer; font-weight: 600; font-size: .9rem; } .wr-card__log { margin: 6px 0 0; padding: 8px 0 0; list-style: none; font-size: .84rem; border-top: 1px dashed var(--line); } .wr-card__log li { padding: 2px 0; } .wr-card__log .mono { margin-right: 6px; } .chip b { color: var(--brand); } .mini-table { width: 100%; border-collapse: collapse; } .mini-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: .88rem; } .mini-table tr:last-child td { border-bottom: 0; } .mini-table .mono { font-family: ui-monospace, Menlo, monospace; font-size: .86rem; color: var(--brand-dark); } /* Product image manager */ .img-search { display: flex; gap: 8px; margin-bottom: 16px; max-width: 460px; } /* Rand/Radius aus der gemeinsamen Verwaltungs-Feldregel (Kopf-Suchfeld-Stil) */ .img-search input { flex: 1; } /* Bestellungen: drei Bedienelemente und ein langer Platzhalter in der Suchzeile — mit den 460px vom Bild-Manager waere der Platzhalter abgeschnitten. */ .adminorders-page .img-search { max-width: 820px; flex-wrap: wrap; } .adminorders-page .img-search input { min-width: 470px; } .bo-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; } /* Dieselben Masse wie das Produktraster im Online-Shop (.product-grid weiter oben): gleiche Spaltenbreite, gleicher Abstand, gleicher 88-Prozent-Rand ums Bild. Wer ein Foto vor dem Hochladen beurteilt, sieht es dadurch genau so gross, wie es der Kunde auf der Kategorieseite sieht — rund 250 px. Wird die eine Regel geaendert, gehoert die andere mit. */ .img-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .img-tile { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-alt); } /* Bildflaeche wie die Produktkarte: quadratisch, weiss, Bild auf 88 Prozent eingerueckt (.product-card__img weiter oben). */ .img-tile img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; padding: 6%; } .img-tile__badge { position: absolute; top: 6px; left: 6px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; } .img-tile__actions { display: flex; gap: 4px; padding: 6px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--line); background: var(--surface); } .img-tile__actions form { margin: 0; } .img-btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 30px; height: 28px; cursor: pointer; font-size: .88rem; line-height: 1; } .img-btn:hover { background: var(--surface-alt); } .img-btn--del { color: #c0392b; border-color: #f3c9c4; } .img-btn--del:hover { background: #fdecea; } .img-file { display: block; margin-bottom: 4px; } .mini-table .num { text-align: right; white-space: nowrap; font-weight: 600; } .optima-block { width: 100%; font-family: ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: .86rem; line-height: 1.5; white-space: pre; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface-alt); color: var(--ink); resize: vertical; } .copy-done { color: var(--success); font-weight: 600; font-size: .88rem; margin-left: 10px; } .mini-table thead th { text-align: left; font-size: .84rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .mini-table thead th.num { text-align: right; } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; font-size: .84rem; font-weight: 700; } .lang-toggle a { padding: 5px 10px; color: var(--muted); background: var(--surface); } .lang-toggle a.is-active { background: var(--brand); color: #fff; } .lang-toggle a:hover:not(.is-active) { background: var(--surface-alt); } .dash-note { background: #eaf3fb; border: 1px solid #cfe3f5; border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .9rem; color: var(--ink-soft); } .kpi__tag { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); background: var(--surface-alt); border-radius: 10px; padding: 1px 8px; margin-left: 4px; vertical-align: middle; } .mini-table tr.is-current td { background: #f4f9ff; } .delta { display: inline-block; font-weight: 700; font-size: .9rem; } .delta--up { color: var(--success); } .delta--down { color: #c0392b; } .delta--flat { color: var(--muted); } .kpi--accent .delta--up { color: #b6f0c2; } .kpi--accent .delta--down { color: #ffc9c2; } @media (max-width: 900px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .dash-cols { grid-template-columns: 1fr; } } /* Print: order/quote documents */ @page { size: A4; margin: 18mm 16mm; } @media print { html, body { background: #fff !important; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 11pt; } .site-header, .site-footer, .no-print, .nav-backdrop { display: none !important; } .page { padding: 0; } .container { max-width: 100%; padding: 0; margin: 0; } .dash-card { border: 0; padding: 0 0 14px; break-inside: avoid; } .dash-cols { display: block; } a { color: inherit; text-decoration: none; } /* keep tables tidy across page breaks */ table { page-break-inside: auto; } tr { page-break-inside: avoid; } thead { display: table-header-group; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .site-header__toggle { display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; background: none; border: 0; cursor: pointer; padding: 10px; } .site-header__toggle span { width: 24px; height: 2.5px; background: var(--ink-soft); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } .header-link--info { display: none; } /* Drawer. Transition erst nach erster Nutzer-Interaktion (JS setzt site-nav--animated) — sonst gleitet der Drawer beim Fenster-Verkleinern ueber den Breakpoint sichtbar durchs Bild. */ .site-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(320px, 85vw); background: var(--surface); transform: translateX(100%); overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,.15); } .site-nav--animated { transition: transform .25s ease; } .site-nav.is-open { transform: translateX(0); } .site-nav__inner { display: block; padding: 16px 0 32px; } .site-nav__item:first-child > .site-nav__link { margin-left: 0; } .site-nav__item { display: block; border-bottom: 1px solid var(--line); } .site-nav__item .site-nav__link { color: var(--ink); padding: 14px 20px; font-size: 1rem; display: block; } .site-nav__item:hover > .site-nav__link, .site-nav__item.is-active > .site-nav__link { background: var(--brand-light); color: var(--brand); } .site-nav__item.has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; } .site-nav__chevron { color: var(--ink-soft); padding: 14px 18px; grid-column: 2; grid-row: 1; } .site-nav__chevron svg { transition: transform .2s ease; } .site-nav__chevron[aria-expanded="true"] svg { transform: rotate(180deg); } .site-nav__item:hover .site-nav__chevron { background: none; } .site-nav__dropdown { display: none; position: static; grid-column: 1 / -1; border: 0; box-shadow: none; border-radius: 0; background: var(--surface-alt); padding: 0; opacity: 1; visibility: visible; pointer-events: auto; transition: none; } .site-nav__item:hover .site-nav__dropdown, .site-nav__item:focus-within .site-nav__dropdown { display: none; } /* hover must not trigger drawer submenus */ .site-nav__item.is-open .site-nav__dropdown { display: block; } .site-nav__sublink { padding: 12px 20px 12px 32px; } /* minmax(0,1fr) statt 1fr: sonst gibt das 1400px-Bild die Mindestbreite vor und ragt rechts aus der Karte (iPhone, 402px) */ .product-detail { grid-template-columns: minmax(0, 1fr); padding: 20px; } .product-detail__media, .product-detail__info { min-width: 0; } .product-detail__img { max-width: 100%; } /* Menge + "In den Warenkorb" + "Angebot anfordern" passen nicht in eine Zeile: Menge oben, die beiden Knoepfe darunter jeweils volle Breite */ .addtocart-form__row { flex-wrap: wrap; } .addtocart-form__row .btn, .size-form > .btn { flex: 1 1 100%; width: 100%; margin-top: 4px; } .size-form > .btn + .btn { margin-top: 8px; } .hero__inner { padding: 44px 20px; } .hero h1 { font-size: 1.8rem; } .hero__cta .btn { flex: 1; text-align: center; } .benefits__grid { grid-template-columns: 1fr 1fr; gap: 20px; } .cta-band__inner { flex-direction: column; align-items: flex-start; } .account-teaser { flex-direction: column; align-items: flex-start; } .checkout-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* Der alte Warenkorb-Umbruch stand hier und ueberschrieb die neue Kartenansicht weiter oben (padding: 10px 0 nahm die seitliche Innenabstaende wieder weg) — entfernt 2026-08-04. */ }