/* CyberUnited Demo-Storefronts — gemeinsame Struktur. Farben, Typografie und Bildsprache kommen aus dem jeweiligen theme.css. Hier steht nur, was in allen drei Demos gleich ist. */ *, *::before, *::after { box-sizing: border-box; } /* Muss vor allen Anzeigeregeln stehen: sonst gewinnt ein spaeteres display:flex gegen das hidden-Attribut, und leere Elemente bleiben sichtbar (z.B. der Warenkorb-Zaehler bei 0). */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Gegen horizontales Verrutschen auf schmalen Geraeten. overflow-x auf allein genuegt nicht - scrollt sonst weiter. 'clip' statt 'hidden', damit position:sticky im Kopfbereich weiter funktioniert. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.is-locked { overflow: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight, 400); line-height: 1.08; letter-spacing: var(--display-tracking, -0.02em); margin: 0; /* Lange Versalwoerter ("GETRAGEN.") sprengen sonst schmale Viewports. */ overflow-wrap: break-word; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } .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; } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -110%); z-index: 200; padding: 0.75rem 1.5rem; background: var(--ink); color: var(--bg); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } .skip-link:focus { transform: translate(-50%, 0); } .wrap { width: 100%; max-width: var(--measure, 82rem); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3.5rem); } /* ---------------------------------------------------------- Demo-Banner -- */ /* Pflichtkontrolle CTL-012: auf jeder Seite sichtbar, nicht wegklickbar. */ .demo-bar { position: relative; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; padding: 0.6rem 1.25rem; background: var(--demo-bar-bg); color: var(--demo-bar-ink); font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--demo-bar-line); } .demo-bar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--demo-bar-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-bar-accent) 22%, transparent); flex: none; } .demo-bar strong { font-weight: 600; letter-spacing: 0.14em; } .demo-bar__sep { opacity: 0.35; } .demo-bar__link { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .demo-bar__link:hover { opacity: 0.75; } /* ---------------------------------------------------------------- Header - */ .shop-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); border-bottom: 1px solid transparent; transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .shop-header.is-condensed { border-bottom-color: var(--rule); background: var(--header-bg-solid); } /* ACHTUNG: Dieses Element traegt selbst .wrap. Die Kurzschreibweise 'padding: X 0' wuerde den Seitenabstand von .wrap auf 0 setzen - auf schmalen Viewports klebt der Inhalt dann am Rand. Deshalb padding-block. */ .shop-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(1rem, 2.4vw, 1.6rem); transition: padding-block 0.3s ease; } .shop-header.is-condensed .shop-header__inner { padding-block: 0.75rem; } .brand { display: inline-flex; flex-direction: column; gap: 0.15rem; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: var(--brand-tracking, 0.26em); text-transform: uppercase; font-weight: var(--brand-weight, 500); color: var(--brand-ink); white-space: nowrap; } .brand__sub { font-family: var(--font-body); font-size: 0.5625rem; letter-spacing: 0.34em; color: var(--muted); font-weight: 400; } .shop-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); } .shop-nav a { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); position: relative; padding: 0.35rem 0; transition: color 0.25s ease; } .shop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .shop-nav a:hover { color: var(--ink); } .shop-nav a:hover::after { right: 0; } .shop-header__actions { display: flex; align-items: center; gap: 0.5rem; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 1px solid transparent; border-radius: 999px; color: var(--ink); transition: border-color 0.25s ease, background 0.25s ease; } .icon-btn:hover { border-color: var(--rule); background: var(--tint); } .icon-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.4; } .cart-count { position: absolute; top: 0.3rem; right: 0.25rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; line-height: 1; } .nav-toggle { display: none; } /* ------------------------------------------------------------------ Hero - */ .hero { position: relative; overflow: hidden; } .hero__inner { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; /* wie oben: .wrap-Seitenabstand darf nicht ueberschrieben werden */ padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); } @media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; } .eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--accent); } .hero h1 { /* Untere Grenze bewusst klein: bei 390 px ergaben 2.75rem in Versalien eine Zeile breiter als der Viewport. */ font-size: clamp(2.1rem, 8vw, 5.75rem); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } .hero h1 em { font-style: italic; color: var(--accent-soft, var(--accent)); } .hero__lead { font-size: clamp(1rem, 1.35vw, 1.1875rem); color: var(--muted-strong); max-width: 34rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero__stage { position: relative; aspect-ratio: 4 / 5; max-height: min(78vh, 40rem); border-radius: var(--radius-lg, 2px); overflow: hidden; } /* Produktbilder sind CSS-Kompositionen ohne eigenen Inhalt und haetten deshalb keine Hoehe. Wo .pv ein KIND des Rahmens ist, fuellt es ihn aus. ACHTUNG: Im Warenkorb traegt das Vorschau-Element die Klasse .pv selbst - dort darf NICHT absolut positioniert werden, sonst legt es sich ueber den gesamten Drawer. Deshalb ausschliesslich der Kindselektor. */ .hero__stage > .pv, .split__media > .pv { position: absolute; inset: 0; } .split__media { position: relative; } .hero__stage-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stage-caption-ink, #fff); background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); } /* ---------------------------------------------------------------- Buttons - */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 2rem; border: 1px solid transparent; border-radius: var(--radius-btn, 0); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); } .btn--ghost { border-color: var(--rule-strong); color: var(--ink); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* --------------------------------------------------------------- Sections - */ .section { padding: clamp(3.5rem, 8vw, 7rem) 0; } .section--tint { background: var(--tint); } .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head h2 { font-size: clamp(1.85rem, 4vw, 3rem); } .section-head p { color: var(--muted-strong); max-width: 32rem; margin-top: 0.85rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.35rem; transition: gap 0.25s ease, border-color 0.25s ease; } .link-arrow:hover { gap: 0.95rem; border-color: var(--accent); } /* ------------------------------------------------------ Suche und Filter - */ .finder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--rule); } .finder__form { position: relative; flex: 1 1 15rem; max-width: 22rem; display: flex; align-items: center; } .finder__icon { position: absolute; left: 0.85rem; display: inline-flex; pointer-events: none; color: var(--muted); } .finder__icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; } .finder__input { width: 100%; padding: 0.8rem 0.9rem 0.8rem 2.6rem; font-family: var(--font-body); font-size: 0.875rem; color: var(--ink); background: var(--tint); border: 1px solid var(--rule); border-radius: var(--radius-btn, 0); transition: border-color 0.25s ease, background 0.25s ease; } .finder__input::placeholder { color: var(--muted); } .finder__input:focus { outline: none; border-color: var(--accent); background: transparent; } .finder__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* Das native Kreuz von type=search folgt nicht der Palette. */ .finder__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .finder__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; } .finder__tab { padding: 0.55rem 1.05rem; background: none; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .finder__tab:hover { color: var(--ink); border-color: var(--rule-strong); } .finder__tab.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .finder__meta { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .finder__count { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .finder__reset { background: none; border: 0; padding: 0; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule-strong); transition: border-color 0.22s ease, color 0.22s ease; } .finder__reset:hover { color: var(--accent); border-color: var(--accent); } .finder__none { padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; color: var(--muted); font-size: 0.9375rem; } @media (max-width: 46rem) { .finder__meta { margin-left: 0; width: 100%; justify-content: space-between; } } /* ------------------------------------------------------------ Produktnetz - */ .grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); } .card { position: relative; display: flex; flex-direction: column; } .card__media { position: relative; aspect-ratio: var(--card-ratio, 3 / 4); overflow: hidden; border-radius: var(--radius-md, 0); background: var(--tint); } .card__media > .pv { position: absolute; inset: 0; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .card:hover .card__media > .pv { transform: scale(1.045); } .card__flag { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; padding: 0.3rem 0.7rem; background: var(--flag-bg); color: var(--flag-ink); font-family: var(--font-body); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .card__add { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.85rem 1rem; background: var(--ink); color: var(--bg); border: 0; border-radius: var(--radius-btn, 0); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0; transform: translateY(0.6rem); transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease; } .card:hover .card__add, .card:focus-within .card__add { opacity: 1; transform: translateY(0); } .card__add:hover { background: var(--accent); color: var(--accent-ink); } .card__body { padding-top: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .card__cat { font-family: var(--font-body); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .card__name { font-size: 1.0625rem; letter-spacing: 0; } .card__variant { font-size: 0.8125rem; color: var(--muted); } .card__price { margin-top: 0.35rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; } /* Berührungsgeräte haben kein Hover - Knopf dauerhaft zeigen. */ @media (hover: none) { .card__add { opacity: 1; transform: none; } } /* ----------------------------------------------------------------- Story -- */ .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } } .split__media { aspect-ratio: 5 / 4; border-radius: var(--radius-md, 0); overflow: hidden; } .split h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); margin-bottom: 1.25rem; } .split p { color: var(--muted-strong); margin-bottom: 1rem; } .marks { display: grid; gap: 1.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: clamp(2rem, 4vw, 3rem); } .mark__k { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: var(--accent-soft, var(--accent)); } .mark__v { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; } /* ------------------------------------------------------------------ Footer */ .shop-footer { background: var(--footer-bg); color: var(--footer-ink); padding: clamp(3rem, 6vw, 5rem) 0 2rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-bottom: 2.5rem; border-bottom: 1px solid var(--footer-rule); } .footer-grid h3 { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.1rem; color: var(--footer-ink); } .footer-grid li + li { margin-top: 0.6rem; } .footer-grid a, .footer-grid p { font-size: 0.875rem; color: var(--footer-muted); } .footer-grid a:hover { color: var(--footer-ink); } .footer-note { padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.75rem; color: var(--footer-muted); } .footer-note a { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ Cart-Drawer - */ .cart-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(8, 8, 12, 0.5); opacity: 0; transition: opacity 0.28s ease; backdrop-filter: blur(2px); } .cart-overlay.is-open { opacity: 1; } .cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; width: min(27rem, 100vw); display: flex; flex-direction: column; background: var(--bg); color: var(--ink); box-shadow: -24px 0 60px rgba(8, 8, 12, 0.22); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); } .cart.is-open { transform: translateX(0); } .cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--rule); } .cart__title { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .cart__body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; } .cart__empty { color: var(--muted); font-size: 0.9375rem; padding: 2.5rem 0; text-align: center; } .cart-line { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 0.9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--rule); } .cart-line__thumb { display: block; aspect-ratio: 3 / 4; border-radius: 2px; overflow: hidden; background: var(--tint); } .cart-line__name { font-family: var(--font-display); font-size: 0.9375rem; } .cart-line__variant { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; } .cart-line__controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.7rem; } .cart-line__price { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; } .cart-line__remove { background: none; border: 0; color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0.15rem 0.3rem; transition: color 0.2s ease; } .cart-line__remove:hover { color: var(--accent); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); } .qty__btn { width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 0.9375rem; color: var(--ink); transition: background 0.2s ease; } .qty__btn:hover:not(:disabled) { background: var(--tint); } .qty__btn:disabled { opacity: 0.35; cursor: not-allowed; } .qty__value { min-width: 2rem; text-align: center; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; } .cart__foot { padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--rule); } .cart__sum { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; } .cart__sum dt { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .cart__sum dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; } .cart__hint { font-size: 0.6875rem; color: var(--muted); margin-bottom: 1.1rem; } .cart__foot .btn { width: 100%; } /* ------------------------------------------------------------ Demo-Dialog - */ .demo-dialog { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; } .demo-dialog__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.62); opacity: 0; transition: opacity 0.22s ease; backdrop-filter: blur(3px); } .demo-dialog.is-open .demo-dialog__backdrop { opacity: 1; } .demo-dialog__panel { position: relative; width: min(30rem, calc(100vw - 2.5rem)); padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--bg); color: var(--ink); border-radius: var(--radius-md, 2px); box-shadow: 0 30px 80px rgba(8, 8, 12, 0.3); transform: translateY(0.9rem) scale(0.985); opacity: 0; transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.26s ease; } .demo-dialog.is-open .demo-dialog__panel { transform: none; opacity: 1; } .demo-dialog__panel h2 { font-size: 1.5rem; margin-bottom: 0.9rem; } .demo-dialog__panel p { color: var(--muted-strong); font-size: 0.9375rem; margin-bottom: 0.85rem; } .demo-dialog__panel .btn { width: 100%; margin-top: 0.5rem; } .demo-dialog__mark { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; } /* ------------------------------------------------------------- Bewegung --- */ [data-reveal] { opacity: 0; transform: translateY(1.4rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* -------------------------------------------------------------- Mobil ----- */ @media (max-width: 52rem) { .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; color: var(--ink); } .nav-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; } .shop-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 clamp(1.25rem, 5vw, 3.5rem); background: var(--header-bg-solid); border-bottom: 1px solid var(--rule); max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .shop-nav.is-open { max-height: 22rem; padding: 0.5rem clamp(1.25rem, 5vw, 3.5rem) 1.25rem; } .shop-nav a { width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .shop-nav a:last-child { border-bottom: 0; } } /* --------------------------------------- Einbettungshinweis (OI-10) ------ Greift nur, wenn die Seite in fremdem Rahmen laeuft. Solange frame-ancestors als Antwort-Header fehlt, ist das die Notbremse. */ html[data-framed="true"] body > *:not(.framed-note) { display: none !important; } html[data-framed="true"] body { display: grid; place-items: center; min-height: 100vh; padding: 2rem; } .framed-note { max-width: 26rem; text-align: center; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; } .framed-note__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; } .framed-note p { color: var(--muted-strong); } /* ========================================================================= Touch-Ziele (WCAG 2.2 - Zielgroesse) ------------------------------------------------------------------------- Gemessen wurde bei 320/375/430/768 px. Die folgenden Elemente lagen unter 44 px Hoehe. Statt sie zu vergroessern - was die Gestaltung veraendern wuerde - bekommen sie eine unsichtbare Trefferflaeche ueber ::after. Sichtbar aendert sich nichts, anklickbar wird die volle Flaeche. Die Regel greift bewusst nur bis 768 px: an Maus und Trackpad ist die kleine Flaeche kein Problem, und die Pseudo-Elemente sollen sich auf grossen Layouts nicht ueberlappen. ========================================================================= */ @media (pointer: coarse), (max-width: 48rem) { /* Link im Demo-Banner: 20 px */ .demo-bar__link { position: relative; } .demo-bar__link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; min-height: 44px; height: 100%; transform: translateY(-50%); /* rein funktional - keine Farbe, keine Verschiebung im Layout */ } /* Pfeil-Link in Abschnittskoepfen: 26 px */ .link-arrow { position: relative; } .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; min-height: 44px; height: 100%; transform: translateY(-50%); /* rein funktional - keine Farbe, keine Verschiebung im Layout */ } /* Filterreiter der Produktsuche: 37 px */ .finder__tab { min-height: 44px; } /* Mengenknoepfe im Warenkorb bleiben klein sichtbar, werden aber greifbar */ .qty__btn { position: relative; } .qty__btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } }