/* ==========================================================================
   SCHNELLE Shop – Designsystem (Schicht über Bootstrap 5.3)
   Reihenfolge: Schrift · Tokens (tokens.css) · Basis · Header · Footer · Buttons · Formulare ·
   Hinweise/Badges · Karten · Tabellen · Navigation (Breadcrumbs/Pagination) ·
   Seitenbereiche · Kundenbereich · Verwaltung (ohne EasyAdmin) · Styleguide ·
   Responsive Anpassungen. Keine Inline-Styles, alles klassenbasiert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hausschrift Montserrat (lokal, woff2, font-display: swap)
   -------------------------------------------------------------------------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat/montserrat-300-lPEPwHw.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat/montserrat-400-n27yqFk.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/montserrat/montserrat-400-italic-APYO-T_.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat/montserrat-500-sfOGGb5.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat/montserrat-600-AFrbMKl.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat/montserrat-700-HY85APK.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat/montserrat-800-R5DJc8d.woff2") format("woff2"); }
/* Fett-kursive Schnitte der Überschriften (CI: 700–800 kursiv in Versalien); ohne sie zeigte der Browser 400 kursiv (Design-Review a62). */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/montserrat/montserrat-700-italic-o1MLK5o.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/montserrat/montserrat-800-italic-pTJUEHr.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   2. Design-Tokens: assets/styles/tokens.css (vorher hier; wird in base.html.twig
      vor dieser Datei geladen)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. Basis: Typografie, Links, Fokus, Container
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--shop-font); font-size: var(--shop-text-base); line-height: var(--shop-leading); color: var(--shop-text); background: var(--shop-canvas); }
.shop-shell { display: flex; min-height: 100vh; flex-direction: column; color: var(--shop-text); background: var(--shop-canvas); }
.shop-shell > main { flex: 1 0 auto; }
.container { --bs-gutter-x: calc(var(--shop-gutter) * 2); }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--shop-navy); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--shop-navy-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 3px; box-shadow: none; }
/* Auf dunklen Flächen (Hero, Kontaktleiste, Navy-Karten, Footer, Aktionsflächen) ist der Navy-Ring unsichtbar: weißer Ring. */
.shop-hero :focus-visible, .shop-section-navy :focus-visible, .shop-contact-bar :focus-visible, .shop-path-card-accent :focus-visible, .shop-footer :focus-visible, .home-promotion:focus-visible, .shop-brand:focus-visible { outline-color: var(--shop-text-on-dark); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .shop-heading { margin: 0 0 .75em; font-family: var(--shop-font); font-weight: 800; font-style: italic; line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; color: var(--shop-ink); }
h1, .h1 { font-size: var(--shop-text-display); }
h2, .h2 { font-size: var(--shop-text-3xl); }
h3, .h3 { font-size: var(--shop-text-xl); }
h4, .h4 { font-size: var(--shop-text-lg); }
h5, h6, .h5, .h6 { margin: 0 0 .5em; font-weight: 700; line-height: 1.3; color: var(--shop-ink); }
/* Ausgewogene Zeilen statt einzelner Wörter in der letzten Zeile (Design-Review a62) */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
.shop-heading--plain { text-transform: none; font-style: normal; font-weight: 700; letter-spacing: 0; }
.shop-eyebrow { margin-bottom: .75rem; color: var(--shop-accent); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.shop-intro, .shop-lead { max-width: 42rem; color: var(--shop-text); font-size: var(--shop-text-lg); line-height: 1.65; }
.shop-text-muted { color: var(--shop-text-muted); }
.shop-text-small { font-size: var(--shop-text-sm); }
.shop-claim { font-size: var(--shop-text-2xl); font-style: italic; font-weight: 400; line-height: 1.3; color: var(--shop-ink); }
.shop-claim strong { font-weight: 800; text-transform: uppercase; }
.shop-skip-link { position: absolute; z-index: 100; top: .75rem; left: .75rem; padding: .7rem 1rem; color: var(--shop-text-on-dark); background: var(--shop-navy); border-radius: var(--shop-radius); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform var(--shop-transition); }
.shop-skip-link:focus { color: var(--shop-text-on-dark); transform: translateY(0); }
.shop-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.shop-section-muted { background: var(--shop-surface); }
.shop-section-heading { margin-bottom: 2.5rem; }
.shop-section-heading h2 { margin-bottom: 0; }
.shop-section-navy { color: var(--shop-text-on-dark); background: var(--shop-navy); }
.shop-section-navy h1, .shop-section-navy h2, .shop-section-navy h3, .shop-section-navy p { color: inherit; }

/* --------------------------------------------------------------------------
   4. Header: Utility-Leiste, Navy-Logoblock, hellgraue Hauptnavigation
   -------------------------------------------------------------------------- */
.shop-header { position: relative; z-index: 30; background: var(--shop-canvas); }
.shop-utility { border-bottom: 1px solid var(--shop-line); background: var(--shop-canvas); }
.shop-utility__inner { display: flex; align-items: center; gap: .5rem; min-height: 3.25rem; }
.shop-search { display: flex; flex: 1 1 8rem; align-items: center; min-width: 0; max-width: 18rem; gap: .25rem; border-bottom: 1px solid var(--shop-ink); }
.shop-search input { flex: 1 1 auto; min-width: 0; width: 100%; padding: .5rem 0; border: 0; background: transparent; color: var(--shop-ink); font: inherit; font-size: var(--shop-text-sm); }
.shop-search input::placeholder { color: var(--shop-text-muted); opacity: 1; }
.shop-search input:disabled { cursor: not-allowed; opacity: .85; }
.shop-search input:focus-visible { outline-offset: 0; }
.shop-search__button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; min-height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--shop-ink); }
.shop-search__button:disabled { cursor: not-allowed; }
/* Live-Suchvorschläge (Funktionsabgleich L-13, assets/js/search-suggest.js): Listbox unter dem Kopf-Suchfeld. Die
   Klasse shop-search--suggest setzt erst das Skript; ohne JavaScript ändert sich am Formular nichts. */
.shop-search--suggest { position: relative; }
.shop-suggest { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 40; width: min(30rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); padding: .35rem 0; overflow-y: auto; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); box-shadow: 0 .75rem 2rem rgba(10, 24, 40, .16); color: var(--shop-ink); text-align: left; }
.shop-suggest[hidden] { display: none; }
.shop-header--compact .shop-suggest { right: 0; left: auto; }
.shop-suggest__group { padding: 0; margin: 0; list-style: none; }
.shop-suggest__group + .shop-suggest__group, .shop-suggest__group + .shop-suggest__option--all { padding-top: .35rem; margin-top: .35rem; border-top: 1px solid var(--shop-line); }
.shop-suggest__heading { padding: .35rem .9rem .2rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shop-suggest__option { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .4rem .9rem; font-size: var(--shop-text-sm); cursor: pointer; }
.shop-suggest__option.is-active { background: var(--shop-surface); box-shadow: inset 3px 0 0 var(--shop-navy); }
.shop-suggest__thumb { display: flex; flex: 0 0 3rem; align-items: center; justify-content: center; width: 3rem; height: 3rem; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.shop-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-suggest__thumb svg { width: 2rem; fill: none; stroke: var(--shop-line-strong); stroke-width: 2; }
.shop-suggest__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.shop-suggest__name { display: -webkit-box; overflow: hidden; color: var(--shop-ink); font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-suggest__sku { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.shop-suggest__price { flex: 0 0 auto; color: var(--shop-ink); font-size: var(--shop-text-sm); text-align: right; white-space: nowrap; }
.shop-suggest__price small { display: block; color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.shop-suggest__price--on-request { max-width: 7rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); white-space: normal; }
.shop-suggest__option--all { color: var(--shop-navy); font-weight: 700; }
.shop-icon { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.shop-icon--sm { width: 1rem; height: 1rem; }
.shop-utility__actions { display: flex; flex: 0 1 auto; align-items: center; gap: .125rem; margin-left: auto; min-width: 0; }
.shop-utility__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .4rem .55rem; border-radius: var(--shop-radius); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
.shop-utility__link:hover { color: var(--shop-navy); background: var(--shop-surface); }
.shop-utility__label { display: none; }
.shop-basket-count, .shop-cart-count, .shop-rental-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 1rem; background: var(--shop-surface-strong); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; line-height: 1; }
.shop-basket-count--filled, .shop-cart-count--filled, .shop-rental-count--filled { background: var(--shop-navy); /* Rot bleibt Handlungsaufforderungen vorbehalten (a62) */ color: var(--shop-text-on-dark); }
.shop-language { display: flex; align-items: center; gap: .125rem; margin-left: .25rem; padding-left: .5rem; border-left: 1px solid var(--shop-line); }
.shop-language a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.75rem; padding: .25rem .35rem; border-radius: var(--shop-radius); color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.shop-language a:hover { color: var(--shop-navy); background: var(--shop-surface); }
.shop-language a.is-active, .shop-language a[aria-current="true"] { color: var(--shop-navy); box-shadow: inset 0 -2px 0 var(--shop-navy); }
.shop-admin-link { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .35rem .75rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.shop-admin-link:hover { color: var(--shop-text-on-dark); border-color: var(--shop-navy); background: var(--shop-navy); }
.shop-masthead { background: var(--shop-surface); border-bottom: 1px solid var(--shop-line); }
.shop-masthead__inner { position: relative; display: flex; align-items: stretch; min-height: 3.75rem; }
.shop-brand { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; flex: 0 0 auto; padding: .7rem 1.1rem; color: var(--shop-text-on-dark); background: var(--shop-navy); font-weight: 800; font-style: italic; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.shop-brand:hover, .shop-brand:focus { color: var(--shop-text-on-dark); }
.shop-brand:focus-visible { outline-offset: -3px; outline-color: rgba(255, 255, 255, .8); }
.shop-brand img, .shop-brand-logo { display: block; width: auto; height: 1.9rem; }
.shop-brand-mark { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--shop-navy); background: var(--shop-canvas); border-radius: .2rem; font-size: .95rem; font-style: normal; letter-spacing: 0; }
.shop-masthead .shop-brand { order: 1; margin-left: auto; }
.shop-mobile-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; order: 0; min-width: 4.25rem; min-height: 3.5rem; padding: .35rem .75rem; border: 0; border-right: 1px solid var(--shop-line); background: var(--shop-canvas); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.shop-mobile-toggle:hover { color: var(--shop-navy); }
.shop-mobile-toggle:focus-visible { outline-offset: -3px; }
.shop-burger { display: block; width: 1.25rem; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.shop-mobile-toggle[aria-expanded="true"] { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-navigation { display: none; flex: 1 1 auto; align-items: stretch; }
.shop-navigation > * { display: flex; flex: 1 1 0; align-items: stretch; border-left: 1px solid var(--shop-line); }
.shop-navigation > :last-child { border-right: 1px solid var(--shop-line); }
.shop-navigation__link { position: relative; display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: .4rem; padding: .75rem 1rem; color: var(--shop-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-decoration: none; text-transform: uppercase; transition: background var(--shop-transition), color var(--shop-transition); }
.shop-navigation__link:hover { color: var(--shop-navy); background: var(--shop-surface-strong); }
.shop-navigation__link:focus-visible { outline-offset: -3px; }
.shop-navigation__link.is-active, .shop-navigation__link[aria-current="page"] { color: var(--shop-navy); box-shadow: inset 0 -3px 0 var(--shop-navy); }
.shop-navigation__item { position: static; }
.shop-navigation__item--has-menu > .shop-navigation__link { padding-right: .35rem; }
.shop-navigation__toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0 .5rem 0 0; border: 0; background: transparent; color: var(--shop-ink); transition: color var(--shop-transition); }
.shop-navigation__toggle:hover, .shop-navigation__toggle[aria-expanded="true"] { color: var(--shop-navy); }
.shop-navigation__toggle:focus-visible { outline-offset: -3px; }
.shop-chevron { display: inline-block; width: .9rem; height: .9rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--shop-transition); }
[aria-expanded="true"] > .shop-chevron { transform: rotate(180deg); }
/* Mega-Menü: weißes Panel unter der Navigation, 3–4 Spalten. Öffnet per Hover/Tastaturfokus (CSS) oder Umschalter (Bootstrap-Collapse). */
.shop-mega { position: absolute; z-index: 40; top: 100%; right: 0; left: 0; background: var(--shop-canvas); border: 1px solid var(--shop-line); border-top: 3px solid var(--shop-navy); box-shadow: var(--shop-shadow-lg); }
.shop-mega.collapsing { height: auto !important; transition: none; }
.shop-mega__inner { max-height: calc(100vh - 11rem); overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.25rem; }
.shop-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; }
.shop-mega__grid > li { min-width: 0; } /* Listeneinträge ohne eigene Klasse: spart je Kategorie Bytes (Seitengewicht) */
.shop-mega__root { display: block; margin-bottom: .5rem; padding: .25rem 0 .45rem; border-bottom: 1px solid var(--shop-line); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; overflow-wrap: anywhere; }
.shop-mega__root:hover { color: var(--shop-navy); border-bottom-color: var(--shop-navy); }
.shop-mega__list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.shop-mega__list a { display: block; padding: .3rem 0; color: var(--shop-text); font-size: var(--shop-text-sm); text-decoration: none; overflow-wrap: anywhere; }
.shop-mega__list a:hover { color: var(--shop-navy); text-decoration: underline; }
.shop-mega__list .shop-mega__more { color: var(--shop-navy); font-weight: 700; }
.shop-mega__all { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; padding: .35rem 0; color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: none; }
.shop-mega__all:hover { text-decoration: underline; }
/* Mobile Navigation als Collapse mit Kategorie-Akkordeon */
.shop-navigation-mobile { border-bottom: 1px solid var(--shop-line); background: var(--shop-canvas); }
.shop-navigation-mobile nav { display: grid; padding: .25rem 0 .75rem; }
.shop-navigation-mobile a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 0; border-bottom: 1px solid var(--shop-line); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.shop-navigation-mobile nav > a::after { content: "›" / ""; /* Alternativtext leer: Dekoration gehört nicht in den zugänglichen Namen */ color: var(--shop-text-muted); font-size: 1.25rem; line-height: 1; }
.shop-navigation-mobile a:hover, .shop-navigation-mobile a.is-active, .shop-navigation-mobile a[aria-current="page"] { color: var(--shop-navy); }
.shop-navigation-mobile a.is-active { box-shadow: inset 3px 0 0 var(--shop-navy); padding-left: .75rem; }
.shop-navigation-mobile .shop-navigation-mobile__secondary a { font-weight: 500; letter-spacing: 0; text-transform: none; }
.shop-navigation-mobile__secondary a .shop-basket-count, .shop-navigation-mobile__secondary a .shop-cart-count, .shop-navigation-mobile__secondary a .shop-rental-count { margin-left: auto; }
.shop-navigation-mobile__item, .shop-mobile-accordion__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--shop-line); }
.shop-navigation-mobile__item > a, .shop-mobile-accordion__row > a { flex: 1 1 auto; border-bottom: 0; }
.shop-navigation-mobile__toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 3rem; min-height: 3rem; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--shop-line); background: transparent; color: var(--shop-ink); }
.shop-navigation-mobile__toggle:hover, .shop-navigation-mobile__toggle[aria-expanded="true"] { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-navigation-mobile__toggle:focus-visible { outline-offset: -3px; }
.shop-mobile-categories { background: var(--shop-surface); }
.shop-mobile-accordion, .shop-mobile-accordion__children { margin: 0; padding: 0; list-style: none; }
.shop-mobile-accordion__row > a, .shop-mobile-accordion > li > a { padding-left: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: none; }
/* Pfeil der Unterlisten-Umschalter per CSS statt SVG (Seitengewicht); dreht sich wie .shop-chevron. */
.shop-mobile-accordion .shop-navigation-mobile__toggle::before { content: ""; width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--shop-transition); }
.shop-mobile-accordion .shop-navigation-mobile__toggle[aria-expanded="true"]::before { margin-top: .25rem; transform: rotate(225deg); }
.shop-mobile-accordion__children { padding: .25rem 0 .5rem 2rem; border-bottom: 1px solid var(--shop-line); }
.shop-mobile-accordion__children a { min-height: 2.75rem; padding: .5rem 0; border-bottom: 0; font-weight: 500; letter-spacing: 0; text-transform: none; }
.shop-mode-notice { padding: .7rem 0; color: var(--shop-warning); border-bottom: 1px solid #e6cb8b; background: var(--shop-warning-soft); font-size: var(--shop-text-sm); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.shop-footer { margin-top: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; color: var(--shop-text-on-dark-muted); background: var(--shop-navy); font-size: var(--shop-text-sm); }
.shop-footer a { color: var(--shop-text-on-dark); text-decoration: none; }
.shop-footer a:hover { text-decoration: underline; }
.shop-footer a:focus-visible { outline-color: rgba(255, 255, 255, .75); }
.shop-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.shop-footer__grid > * { min-width: 0; }
.shop-footer__brand .shop-brand { padding: 0; background: transparent; }
.shop-footer__brand img { height: 2.25rem; }
.shop-footer__brand p { max-width: 24rem; margin: 1rem 0 0; color: var(--shop-text-on-dark-muted); }
.shop-footer__title { margin: 0 0 .9rem; color: var(--shop-text-on-dark); font-size: var(--shop-text-sm); font-weight: 700; font-style: normal; letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
.shop-footer__list { display: grid; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.shop-footer__list a { display: inline-block; padding: .2rem 0; }
.shop-footer__contact address { display: grid; gap: .45rem; margin: 0; font-style: normal; }
.shop-footer__contact address span { display: flex; align-items: flex-start; gap: .6rem; }
.shop-footer__contact .shop-icon { margin-top: .15rem; color: var(--shop-text-on-dark-muted); }
.shop-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.shop-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.shop-footer-links > a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.shop-footer .shop-admin-link { color: var(--shop-text-on-dark); border-color: rgba(255, 255, 255, .45); }
.shop-footer .shop-admin-link:hover { color: var(--shop-navy); background: var(--shop-canvas); border-color: var(--shop-canvas); text-decoration: none; }
.shop-footer .shop-brand-mark { color: var(--shop-navy); }
.shop-footer p { color: var(--shop-text-on-dark-muted); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.shop-button, .shop-button-primary, .shop-button-secondary, .shop-button-accent, .shop-button-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .65rem 1.25rem; border: 1px solid transparent; border-radius: var(--shop-radius); font-family: var(--shop-font); font-size: var(--shop-text-sm); font-weight: 700; letter-spacing: .04em; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--shop-transition), color var(--shop-transition), border-color var(--shop-transition), box-shadow var(--shop-transition); }
.shop-button-primary, .btn-primary { color: var(--shop-text-on-dark); background: var(--shop-navy); border-color: var(--shop-navy); }
.shop-button-primary:hover, .shop-button-primary:focus, .btn-primary:hover, .btn-primary:focus { color: var(--shop-text-on-dark); background: var(--shop-navy-hover); border-color: var(--shop-navy-hover); }
.shop-button-secondary, .btn-default { color: var(--shop-ink); background: var(--shop-canvas); border-color: var(--shop-ink); }
.shop-button-secondary:hover, .shop-button-secondary:focus, .btn-default:hover { color: var(--shop-text-on-dark); background: var(--shop-ink); border-color: var(--shop-ink); }
.shop-button-accent { color: var(--shop-text-on-dark); background: var(--shop-accent); border-color: var(--shop-accent); }
.shop-button-accent:hover, .shop-button-accent:focus { color: var(--shop-text-on-dark); background: var(--shop-accent-hover); border-color: var(--shop-accent-hover); }
.shop-button-accent:focus-visible { outline-color: var(--shop-accent-focus); }
.shop-button-link { min-height: 2.25rem; padding: .35rem 0; /* bündig mit der Textkante (a62) */ color: var(--shop-navy); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.shop-button-link:hover { color: var(--shop-navy-hover); }
.shop-button--small { min-height: 2.25rem; padding: .4rem .85rem; font-size: var(--shop-text-xs); }
.shop-button--large { min-height: 3.25rem; padding: .85rem 1.75rem; font-size: var(--shop-text-base); }
.shop-button--block { width: 100%; }
.shop-button-on-dark { color: var(--shop-navy); background: var(--shop-canvas); border-color: var(--shop-canvas); }
.shop-button-on-dark:hover { color: var(--shop-navy-hover); background: var(--shop-surface); border-color: var(--shop-surface); }
.shop-button:disabled, .shop-button-primary:disabled, .shop-button-secondary:disabled, .shop-button-accent:disabled, .shop-button-link:disabled, .shop-button-primary.is-disabled, .shop-button-secondary.is-disabled, .shop-button-accent.is-disabled, .shop-button-link.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 3px; box-shadow: none; } /* Bootstrap setzt outline: 0 und einen Schatten aus nicht gesetzten Variablen (a62) */
.btn.shop-button-primary, .btn.shop-button-secondary, .btn.shop-button-accent, .btn.shop-button-link { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: var(--shop-text-sm); --bs-btn-border-radius: var(--shop-radius); }
.btn-outline-danger { --bs-btn-color: var(--shop-accent); --bs-btn-border-color: var(--shop-accent); --bs-btn-hover-bg: var(--shop-accent); --bs-btn-hover-border-color: var(--shop-accent); --bs-btn-active-bg: var(--shop-accent-hover); --bs-btn-active-border-color: var(--shop-accent-hover); }
.shop-button-group { display: flex; flex-wrap: wrap; gap: .75rem; }
.shop-text-link, .catalog-card-link, .catalog-back, .shop-arrow-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.5rem; color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: none; }
.shop-text-link:hover, .catalog-card-link:hover, .catalog-back:hover, .shop-arrow-link:hover { color: var(--shop-accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Formulare
   -------------------------------------------------------------------------- */
.shop-form { display: grid; gap: 1.15rem; }
.shop-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.shop-form legend { float: none; width: auto; margin-bottom: .75rem; font-size: var(--shop-text-base); font-weight: 700; color: var(--shop-ink); }
.shop-form__row { display: grid; gap: 1.15rem; align-items: start; }
.shop-field { display: grid; gap: .4rem; margin: 0; }
.shop-field__label, .shop-form label, .customer-form label, .admin-form label, .admin-auth__form label, .site-form-block label { display: block; margin-bottom: .35rem; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; }
.shop-field__label .shop-field__required, .shop-form .required::after { color: var(--shop-accent); }
.shop-field__input, .shop-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), .shop-form select, .shop-form textarea,
.customer-form input:not([type="checkbox"]):not([type="radio"]), .customer-form select, .customer-form textarea,
.admin-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), .admin-form select, .admin-form textarea,
.admin-auth__form input:not([type="checkbox"]), .site-form-block input:not([type="checkbox"]):not([type="radio"]), .site-form-block select, .site-form-block textarea,
.product-inquiry-add input[type="number"], .form-control, .form-select { display: block; width: 100%; min-height: 2.875rem; padding: .65rem .85rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-family: var(--shop-font); font-size: var(--shop-text-base); line-height: 1.4; transition: border-color var(--shop-transition), box-shadow var(--shop-transition); }
.shop-form select, .shop-field__input--select, .customer-form select, .admin-form select, .site-form-block select, .form-select { padding-right: 2.5rem; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d4b58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; appearance: none; }
.shop-form textarea, .shop-field__input--textarea, .customer-form textarea, .admin-form textarea, .site-form-block textarea { min-height: 7rem; resize: vertical; }
.shop-field__input:focus, .shop-form input:focus, .shop-form select:focus, .shop-form textarea:focus, .customer-form input:focus, .customer-form select:focus, .customer-form textarea:focus, .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .admin-auth__form input:focus, .site-form-block input:focus, .site-form-block select:focus, .site-form-block textarea:focus, .form-control:focus, .form-select:focus { border-color: var(--shop-navy); outline: 3px solid var(--shop-navy-focus); outline-offset: 0; box-shadow: none; }
.shop-field__input::placeholder, .shop-form input::placeholder, .shop-form textarea::placeholder { color: var(--shop-text-muted); opacity: 1; }
.shop-field__input:disabled, .shop-form input:disabled, .shop-form select:disabled, .shop-form textarea:disabled { background: var(--shop-surface); color: var(--shop-text-muted); cursor: not-allowed; }
.shop-field__help, .shop-form .form-text, .shop-form small, .customer-form small, .admin-form .form-text, .admin-form small, .site-form__hint, .form-text { display: block; margin-top: .35rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); line-height: 1.5; }
.shop-field__error, .shop-form .invalid-feedback, .shop-form .form-error-message, .admin-form .invalid-feedback, .site-form-block .invalid-feedback, .site-form-block .form-error-message, .invalid-feedback { display: block; margin-top: .35rem; color: var(--shop-danger); font-size: var(--shop-text-xs); font-weight: 600; }
.shop-field__error::before { content: "⚠ "; }
.shop-field--invalid .shop-field__input, .shop-field__input.is-invalid, .shop-form .is-invalid, .admin-form .is-invalid, .site-form-block .is-invalid, .form-control.is-invalid { border-color: var(--shop-danger); background-image: none; }
.shop-field--invalid .shop-field__input:focus, .shop-form .is-invalid:focus { outline-color: var(--shop-danger); }
.shop-field--invalid .shop-field__label { color: var(--shop-danger); }
/* Fehlerzustand auch ohne Fokus sichtbar (a62): Die Feldregeln oben sind durch die :not()-Kette sehr spezifisch und
   überdeckten den roten Rahmen; `form` hebt diese Regel darüber. Auswahlfelder behalten ihren Pfeil. */
form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea):is([aria-invalid="true"], .is-invalid) { border-color: var(--shop-danger); }
form select:is([aria-invalid="true"], .is-invalid) { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d4b58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1rem; }
.shop-form ul { padding-left: 1.1rem; margin: 0; color: var(--shop-danger); font-size: var(--shop-text-xs); }
.shop-check, .shop-form .form-check, .admin-form .form-check, .site-form-block .form-check { display: flex; align-items: flex-start; gap: .65rem; min-height: 0; padding: 0; margin: 0; }
.shop-check input[type="checkbox"], .shop-check input[type="radio"], .shop-form input[type="checkbox"], .shop-form input[type="radio"], .customer-form input[type="checkbox"], .site-form-block input[type="checkbox"], .admin-form .form-check input, .catalog-filter-groups input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--shop-navy); }
.shop-check label, .shop-form .form-check label, .admin-form .form-check label, .site-form-block .form-check label { margin: 0; font-weight: 500; }
.shop-form__actions, .inquiry-form-actions, .admin-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.shop-input-group { display: flex; }
.shop-input-group input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.shop-input-group .shop-button-primary, .shop-input-group .shop-button-accent { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.site-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.site-form-block form, .customer-form { display: grid; gap: 1.15rem; }
.site-form-block form > div, .customer-form > div, .customer-form .mb-3 { margin: 0 !important; }

/* --------------------------------------------------------------------------
   8. Hinweise, Alerts, Badges
   -------------------------------------------------------------------------- */
.shop-alert, .alert { display: flex; gap: .75rem; padding: .9rem 1.1rem; margin-bottom: 1rem; border: 1px solid var(--shop-line); border-left-width: .3rem; border-radius: var(--shop-radius); color: var(--shop-ink); background: var(--shop-surface); font-size: var(--shop-text-sm); line-height: 1.5; }
.shop-alert strong { display: block; margin-bottom: .15rem; }
.shop-alert p:last-child { margin-bottom: 0; }
.shop-alert--info, .alert-info { color: var(--shop-navy); border-color: #b9c7da; border-left-color: var(--shop-navy); background: var(--shop-info-soft); }
.shop-alert--success, .alert-success { color: var(--shop-success); border-color: #b7dcc6; border-left-color: var(--shop-success); background: var(--shop-success-soft); }
.shop-alert--warning, .alert-warning { color: var(--shop-warning); border-color: #e6cb8b; border-left-color: #c58a00; background: var(--shop-warning-soft); }
.shop-alert--danger, .alert-danger { color: var(--shop-danger); border-color: #efb4ae; border-left-color: var(--shop-danger); background: var(--shop-danger-soft); }
.shop-notice, .product-detail-note, .content-page-notice { padding: 1.25rem; border-left: .3rem solid var(--shop-accent); background: var(--shop-surface); }
.shop-notice strong, .product-detail-note strong, .content-page-notice strong { display: block; margin-bottom: .35rem; color: var(--shop-ink); }
.shop-notice p:last-child, .content-page-notice p { margin: 0; }
.shop-notice--navy { border-left-color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-badge, .customer-inquiry-card__status, .admin-access-roles small, .admin-access-security { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.5rem; padding: .15rem .55rem; border-radius: 999px; color: var(--shop-ink); background: var(--shop-surface-strong); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; }
.shop-badge--navy, .shop-badge--new { color: var(--shop-text-on-dark); background: var(--shop-navy); }
.shop-badge--accent, .shop-badge--sale { color: var(--shop-text-on-dark); background: var(--shop-accent); }
.shop-badge--outline { border: 1px solid var(--shop-line-strong); background: transparent; }
.shop-badge--used, .shop-badge--warning { color: var(--shop-warning); background: var(--shop-warning-soft); }
.shop-badge--rent, .shop-badge--info { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-badge--success, .admin-access-security.is-secure { color: var(--shop-success); background: var(--shop-success-soft); }
.shop-badge--danger { color: var(--shop-danger); background: var(--shop-danger-soft); }
.shop-badge--dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   9. Karten: Produkt, Kategorie, allgemeine Fläche
   -------------------------------------------------------------------------- */
.shop-card, .inquiry-panel, .customer-auth, .catalog-empty, .inquiry-empty, .admin-panel { border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.shop-card { padding: clamp(1.25rem, 3vw, 1.75rem); }
.shop-card--muted { background: var(--shop-surface); }
.shop-card h2, .shop-card h3, .inquiry-panel h2 { margin-bottom: 1rem; font-size: var(--shop-text-xl); }
.catalog-card, .shop-product-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); transition: box-shadow var(--shop-transition), border-color var(--shop-transition), transform var(--shop-transition); }
.catalog-card:hover, .shop-product-card:hover { border-color: var(--shop-line-strong); box-shadow: var(--shop-shadow); transform: translateY(-2px); }
.catalog-card:focus-within { box-shadow: var(--shop-focus-ring); }
.catalog-card-visual, .product-detail-visual, .shop-product-card__visual { position: relative; display: grid; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; color: var(--shop-navy); background: linear-gradient(160deg, var(--shop-surface) 0%, var(--shop-surface-strong) 100%); }
.catalog-card-visual img, .product-detail-visual img, .shop-product-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card-visual span, .product-detail-visual span, .shop-product-card__visual span { display: grid; width: 4rem; height: 4rem; place-items: center; border: 2px solid var(--shop-navy); border-radius: 50%; font-size: 1.1rem; font-weight: 800; font-style: italic; letter-spacing: 0; }
.catalog-card-badges, .shop-product-card__badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.catalog-card-body, .shop-product-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem 1.25rem; }
.catalog-card-sku, .shop-product-card__sku { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.catalog-card h2, .catalog-card h3, .shop-product-card__title { margin: 0 0 .5rem; font-size: var(--shop-text-lg); font-style: normal; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.catalog-card h2 a, .catalog-card h3 a, .shop-product-card__title a { color: inherit; text-decoration: none; }
.catalog-card h2 a::after, .catalog-card h3 a::after, .shop-product-card__title a::after { content: ""; position: absolute; inset: 0; }
.catalog-card p, .shop-product-card__text { margin: 0 0 .5rem; color: var(--shop-text); font-size: var(--shop-text-sm); line-height: 1.5; }
.catalog-card-meta, .shop-product-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.catalog-card-price, .shop-product-card__price { color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; }
.catalog-card-actions, .shop-product-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.catalog-card-actions .shop-button-primary, .catalog-card-actions .shop-button-secondary, .catalog-card-actions .shop-button-accent, .shop-product-card__actions .shop-button-primary, .shop-product-card__actions .shop-button-secondary, .shop-product-card__actions .shop-button-accent { position: relative; z-index: 1; flex: 1 1 auto; min-height: 2.5rem; padding: .5rem .85rem; font-size: var(--shop-text-xs); }
.catalog-card-link { position: relative; z-index: 1; margin-top: auto; padding-top: .5rem; }
.content-category-card, .shop-category-card { position: relative; display: grid; min-height: 10rem; align-content: end; gap: .3rem; padding: 1.25rem; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); color: var(--shop-ink); background: var(--shop-surface); text-decoration: none; transition: box-shadow var(--shop-transition), transform var(--shop-transition), background var(--shop-transition); }
.content-category-card::before, .shop-category-card::before { content: ""; position: absolute; top: -2rem; right: -2rem; width: 7rem; height: 7rem; border: .9rem solid rgba(24, 57, 97, .1); border-radius: 50%; }
.content-category-card:hover, .shop-category-card:hover { color: var(--shop-navy); background: var(--shop-navy-soft); box-shadow: var(--shop-shadow); transform: translateY(-2px); }
.content-category-card > span, .shop-category-card__eyebrow { color: var(--shop-accent); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.content-category-card strong, .shop-category-card__title { font-size: var(--shop-text-lg); font-style: italic; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.content-category-card b, .shop-category-card__count { margin-top: .5rem; color: var(--shop-navy); font-size: var(--shop-text-xs); font-weight: 700; }
.shop-category-card__count { color: var(--shop-text-muted); font-weight: 600; }
.shop-category-card--image { min-height: 14rem; color: var(--shop-text-on-dark); background: var(--shop-navy); }
.shop-category-card--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.shop-category-card--image > * { position: relative; }
.shop-category-card--image:hover { color: var(--shop-text-on-dark); background: var(--shop-navy-hover); }
.shop-category-card--image .shop-category-card__count { color: var(--shop-text-on-dark-muted); }

/* --------------------------------------------------------------------------
   10. Tabellen, Definitionslisten
   -------------------------------------------------------------------------- */
.shop-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shop-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--shop-text-sm); }
.shop-table caption { padding: .5rem 0; caption-side: top; color: var(--shop-text-muted); text-align: left; }
.shop-table th, .shop-table td { padding: .8rem .85rem; border-bottom: 1px solid var(--shop-line); text-align: left; vertical-align: top; }
.shop-table thead th { color: var(--shop-ink); background: var(--shop-surface); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.shop-table tbody tr:hover { background: rgba(24, 57, 97, .03); }
.shop-table .is-numeric, .shop-table .text-end { text-align: right; font-variant-numeric: tabular-nums; }
.shop-table a { font-weight: 700; text-decoration: none; }
.shop-table a:hover { text-decoration: underline; }
.shop-table--striped tbody tr:nth-child(even) { background: rgba(24, 57, 97, .025); }
.shop-datasheet { display: grid; grid-template-columns: minmax(min-content, 35%) minmax(0, 1fr); /* lange Begriffe überlappen den Wert nicht (a62) */ margin: 0; border-top: 1px solid var(--shop-line); font-size: var(--shop-text-sm); }
.shop-datasheet dt, .shop-datasheet dd { padding: .65rem .5rem; margin: 0; border-bottom: 1px solid var(--shop-line); }
.shop-datasheet dt { color: var(--shop-text-muted); font-weight: 600; }
.shop-datasheet dd { min-width: 0; color: var(--shop-ink); font-weight: 600; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   11. Breadcrumbs, Pagination, Leer- und Ladezustände
   -------------------------------------------------------------------------- */
.shop-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.25rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .02em; }
.shop-breadcrumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--shop-text-muted); text-decoration: none; }
.shop-breadcrumbs a:hover { color: var(--shop-navy); text-decoration: underline; }
.shop-breadcrumbs [aria-current="page"] { color: var(--shop-ink); }
.shop-breadcrumbs span[aria-hidden] { color: var(--shop-line-strong); }
.shop-pagination, .catalog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; margin-top: 2.5rem; padding: 0; list-style: none; }
.shop-pagination > a, .shop-pagination > span, .catalog-pagination > a, .catalog-pagination > span { /* nur direkte Kinder: innere Spannen (Zahl, Beschriftung) erhielten sonst eigene Rahmen und dunkle Schrift (a62) */ display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .4rem .75rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: none; }
.shop-pagination a:hover, .catalog-pagination a:hover { color: var(--shop-navy); border-color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-pagination [aria-current="page"], .catalog-pagination [aria-current="page"], .shop-pagination .is-active { color: var(--shop-text-on-dark); border-color: var(--shop-navy); background: var(--shop-navy); }
.shop-pagination .is-disabled, .catalog-pagination .is-disabled { color: var(--shop-text-muted); background: var(--shop-surface); pointer-events: none; }
.shop-pagination .shop-pagination__ellipsis { border-color: transparent; }
.shop-empty, .catalog-empty, .inquiry-empty { display: grid; max-width: 42rem; gap: .5rem; justify-items: start; padding: clamp(1.5rem, 4vw, 3rem); }
.shop-empty h2, .catalog-empty h2, .inquiry-empty h2 { margin-bottom: .25rem; font-size: var(--shop-text-xl); }
.shop-empty p, .catalog-empty p, .inquiry-empty p { max-width: 34rem; margin: 0 0 .75rem; color: var(--shop-text-muted); }
.shop-empty__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: .5rem; border-radius: 50%; color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-skeleton { display: block; min-height: 1rem; border-radius: var(--shop-radius); background: linear-gradient(90deg, var(--shop-surface) 25%, var(--shop-surface-strong) 50%, var(--shop-surface) 75%); background-size: 200% 100%; animation: shop-skeleton 1.4s ease infinite; }
.shop-skeleton--text { width: 70%; height: .9rem; }
.shop-skeleton--title { width: 50%; height: 1.4rem; }
.shop-skeleton--visual { aspect-ratio: 4 / 3; }
@keyframes shop-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.shop-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 3px solid var(--shop-line); border-top-color: var(--shop-navy); border-radius: 50%; animation: shop-spin .8s linear infinite; }
@keyframes shop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shop-skeleton, .shop-spinner { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* --------------------------------------------------------------------------
   12. Startseite (bestehende Klassen, neu eingefärbt)
   -------------------------------------------------------------------------- */
.shop-hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0; color: var(--shop-text-on-dark); background: var(--shop-navy); }
.shop-hero h1 { max-width: 16ch; margin-bottom: 1.25rem; color: inherit; }
.shop-hero h1 span { color: var(--shop-surface-strong); font-weight: 400; font-style: italic; text-transform: none; }
.shop-hero .shop-eyebrow { color: var(--shop-text-on-dark-muted); }
.shop-hero .shop-intro { color: var(--shop-text-on-dark-muted); }
.shop-hero .shop-button-primary { color: var(--shop-navy); background: var(--shop-canvas); border-color: var(--shop-canvas); }
.shop-hero .shop-button-primary:hover { background: var(--shop-surface); border-color: var(--shop-surface); }
.shop-hero .shop-button-secondary { color: var(--shop-text-on-dark); background: transparent; border-color: rgba(255, 255, 255, .6); }
.shop-hero .shop-button-secondary:hover { color: var(--shop-navy); background: var(--shop-canvas); border-color: var(--shop-canvas); }
.shop-hero-image { position: relative; min-height: 18rem; overflow: hidden; background: var(--shop-navy); }
.shop-hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-hero-image__overlay { position: relative; display: grid; min-height: 18rem; align-content: center; padding: 2rem 0; color: var(--shop-text-on-dark); background: linear-gradient(90deg, rgba(24, 57, 97, .75), rgba(24, 57, 97, .25)); }
.shop-hero-image__overlay h1 { max-width: 22ch; color: inherit; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.shop-facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 2.5rem 0 0; }
.shop-facts div { min-width: 6rem; }
.shop-facts dt { font-size: var(--shop-text-lg); font-style: italic; font-weight: 800; text-transform: uppercase; }
.shop-facts dd { margin: 0; color: var(--shop-text-on-dark-muted); font-size: var(--shop-text-xs); }
.shop-hero-panel { position: relative; min-height: 22rem; padding: 1.25rem; overflow: hidden; color: var(--shop-text-on-dark); background: var(--shop-navy-hover); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--shop-radius-lg); box-shadow: var(--shop-shadow-lg); }
.shop-panel-topline { display: flex; gap: .35rem; }
.shop-panel-topline span { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.shop-panel-label { margin-top: 2.5rem; font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .12em; }
.shop-panel-focus { position: relative; display: grid; width: 12rem; height: 12rem; margin: 2rem auto 0; place-items: center; }
.shop-panel-core { position: relative; z-index: 1; display: grid; width: 5.5rem; height: 5.5rem; place-items: center; color: var(--shop-text-on-dark); background: var(--shop-accent); border-radius: 50%; font-size: 2rem; font-weight: 800; font-style: italic; }
.shop-panel-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; }
.orbit-one { width: 100%; height: 100%; }
.orbit-two { width: 72%; height: 72%; border-style: dashed; transform: rotate(36deg); }
.shop-panel-caption { position: absolute; right: 1.5rem; bottom: 1.5rem; max-width: 15rem; color: var(--shop-text-on-dark-muted); font-size: var(--shop-text-sm); line-height: 1.5; }
.shop-path-card { position: relative; height: 100%; min-height: 15rem; padding: 1.6rem; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.shop-path-card h3 { margin-top: 2rem; }
.shop-path-card p { max-width: 24rem; margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); line-height: 1.6; }
.shop-path-number { color: var(--shop-accent); font-size: var(--shop-text-xs); font-weight: 800; letter-spacing: .1em; }
.shop-path-line { position: absolute; right: -1.6rem; bottom: -1.6rem; width: 7rem; height: 7rem; border: 1.1rem solid var(--shop-navy-soft); border-radius: 50%; }
.shop-path-card-accent { color: var(--shop-text-on-dark); background: var(--shop-navy); border-color: var(--shop-navy); }
.shop-path-card-accent h3 { color: inherit; }
.shop-path-card-accent p { color: var(--shop-text-on-dark-muted); }
.shop-path-card-accent .shop-path-line { border-color: rgba(255, 255, 255, .12); }
.shop-path-card-accent .shop-path-number { color: var(--shop-text-on-dark-muted); /* Rot auf Navy erreichte nur 1,9:1 */ }
.shop-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--shop-line); border-left: 1px solid var(--shop-line); }
.shop-benefits-grid div { min-height: 8rem; padding: 1.2rem; border-right: 1px solid var(--shop-line); border-bottom: 1px solid var(--shop-line); background: var(--shop-canvas); }
.shop-benefits-grid span { display: block; margin-bottom: 1.5rem; color: var(--shop-accent); font-size: var(--shop-text-xs); font-weight: 800; }
.shop-benefits-grid strong { display: block; max-width: 12rem; color: var(--shop-ink); font-size: var(--shop-text-base); line-height: 1.35; }
.shop-feature-grid { display: grid; gap: 2rem; }
.shop-feature h3 { margin-bottom: .5rem; font-size: var(--shop-text-xl); }
.shop-feature p { margin: 0; }
.shop-contact-bar { padding: 2rem 0; color: var(--shop-text-on-dark); background: var(--shop-ink); }
.shop-contact-bar a { color: inherit; }

/* --------------------------------------------------------------------------
   13. Katalog: Listen, Filter, Detailseite
   -------------------------------------------------------------------------- */
.catalog-intro { padding: clamp(2rem, 5vw, 3.5rem) 0 2rem; border-bottom: 1px solid var(--shop-line); background: var(--shop-surface); }
.catalog-intro h1, .product-detail h1 { max-width: 20ch; margin-bottom: 1rem; }
.catalog-section { padding: 2rem 0 clamp(4rem, 8vw, 6rem); }
.catalog-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.catalog-sidebar { min-width: 0; }
.catalog-tree { padding: 0; margin: 0; list-style: none; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
.catalog-tree ul { padding: 0 0 .5rem 1rem; margin: 0; list-style: none; }
.catalog-tree a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .6rem .9rem; border-bottom: 1px solid var(--shop-line); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; text-decoration: none; }
.catalog-tree li:last-child > a { border-bottom: 0; }
.catalog-tree ul a { min-height: 2.5rem; padding: .45rem .9rem; border-bottom: 0; font-weight: 500; }
.catalog-tree a:hover { color: var(--shop-navy); background: var(--shop-surface); }
.catalog-tree a.is-active, .catalog-tree a[aria-current="page"] { color: var(--shop-navy); background: var(--shop-navy-soft); box-shadow: inset 3px 0 0 var(--shop-accent); }
.catalog-tree__count { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; }
.catalog-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--shop-line); color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.catalog-category-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.catalog-category-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .85rem; border: 1px solid var(--shop-line-strong); border-radius: 999px; color: var(--shop-ink); background: var(--shop-canvas); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.catalog-category-nav a:hover { color: var(--shop-navy); border-color: var(--shop-navy); background: var(--shop-navy-soft); }
.catalog-category-nav a.is-active, .catalog-category-nav a[aria-current="page"] { color: var(--shop-text-on-dark); border-color: var(--shop-navy); background: var(--shop-navy); }
.catalog-search { max-width: 36rem; margin-top: 1.5rem; }
.catalog-search label { display: block; margin-bottom: .4rem; color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.catalog-search div { display: flex; }
.catalog-search input { flex: 1 1 auto; min-width: 0; min-height: 2.875rem; padding: .6rem .85rem; border: 1px solid var(--shop-line-strong); border-right: 0; border-radius: var(--shop-radius) 0 0 var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font: inherit; }
.catalog-search input:focus { border-color: var(--shop-navy); outline: 3px solid var(--shop-navy-focus); outline-offset: 0; }
.catalog-search button { min-height: 2.875rem; padding: .6rem 1.1rem; border: 1px solid var(--shop-navy); border-radius: 0 var(--shop-radius) var(--shop-radius) 0; color: var(--shop-text-on-dark); background: var(--shop-navy); font-weight: 700; }
.catalog-search button:hover { background: var(--shop-navy-hover); border-color: var(--shop-navy-hover); }
.catalog-filters, .shop-filterbar { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.catalog-filters-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.catalog-filters-heading .shop-eyebrow { margin-bottom: .35rem; }
.catalog-filters-heading h2 { margin: 0; font-size: var(--shop-text-lg); }
.catalog-filters-heading a { color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; }
.catalog-filter-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.catalog-filter-groups fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.catalog-filter-groups legend { float: none; width: auto; margin-bottom: .45rem; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; }
.catalog-filter-groups label { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .15rem 0; color: var(--shop-text); font-size: var(--shop-text-sm); }
.catalog-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; font-size: var(--shop-text-sm); }
.catalog-active-filters span { color: var(--shop-text-muted); font-weight: 600; }
.catalog-active-filters a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .25rem .7rem; border-radius: 999px; color: var(--shop-navy); background: var(--shop-navy-soft); font-size: var(--shop-text-xs); font-weight: 700; text-decoration: none; }
.catalog-active-filters a b { font-weight: 800; }
.catalog-active-filters a:hover { color: var(--shop-text-on-dark); background: var(--shop-navy); }
.product-detail { padding: 1.5rem 0 clamp(4rem, 8vw, 6rem); }
.catalog-back { margin-bottom: 1.5rem; }
.product-detail-visual { aspect-ratio: 4 / 3; border-radius: var(--shop-radius); }
.product-detail-visual span { width: 6rem; height: 6rem; font-size: 1.6rem; }
.product-gallery { display: grid; gap: .5rem; }
.product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-gallery__thumbs a, .product-gallery__thumbs button { display: block; width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; border: 2px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.product-gallery__thumbs .is-active { border-color: var(--shop-navy); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-description { color: var(--shop-text); font-size: var(--shop-text-base); line-height: 1.75; }
.product-detail-note { display: grid; gap: .35rem; margin-top: 2rem; }
.product-detail-note span { color: var(--shop-text); font-size: var(--shop-text-sm); }
.product-inquiry-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: .75rem; }
.product-inquiry-add label { margin: 0 0 .35rem; }
.product-inquiry-add input[type="number"] { width: 6rem; }
.product-price { margin: 1.25rem 0; color: var(--shop-ink); font-size: var(--shop-text-xl); font-weight: 800; }
.product-price small { display: block; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 500; }
.product-price--on-request { font-size: var(--shop-text-lg); font-style: italic; font-weight: 700; }
.product-variants { margin-top: 2rem; }
.product-variants h2 { font-size: var(--shop-text-lg); }
.product-variants ul { padding: 0; margin: .75rem 0 0; border-top: 1px solid var(--shop-line); list-style: none; }
.product-variants li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--shop-line); }
.product-variants span { color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.product-variant-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-variant-choice a, .product-variant-choice label { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem .85rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; }
.product-variant-choice .is-active, .product-variant-choice a:hover { color: var(--shop-navy); border-color: var(--shop-navy); background: var(--shop-navy-soft); }

/* --------------------------------------------------------------------------
   14. Kundenbereich, Anfragen, Tickets
   -------------------------------------------------------------------------- */
.customer-area, .inquiry-area { min-height: 60vh; padding: clamp(2rem, 5vw, 4rem) 0; background: var(--shop-surface); }
.customer-area__layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.customer-area__inner, .inquiry-area__inner { min-width: 0; max-width: 60rem; }
.customer-area__layout--single .customer-area__inner { max-width: 60rem; margin: 0 auto; }
.inquiry-area__narrow { max-width: 52rem; }
.customer-menu { padding: .75rem 0; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.customer-menu__title { margin: 0; padding: .5rem 1.1rem .85rem; border-bottom: 1px solid var(--shop-line); color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.customer-menu__user { display: block; margin-top: .25rem; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.customer-menu ul { display: grid; padding: .5rem 0 0; margin: 0; list-style: none; }
.customer-menu a { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .55rem 1.1rem; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; text-decoration: none; }
.customer-menu a:hover { color: var(--shop-navy); background: var(--shop-surface); }
.customer-menu a.is-active, .customer-menu a[aria-current="page"] { color: var(--shop-navy); background: var(--shop-navy-soft); box-shadow: inset 3px 0 0 var(--shop-accent); }
.customer-menu .shop-icon { color: var(--shop-text-muted); }
.customer-menu a.is-active .shop-icon { color: var(--shop-navy); }
.customer-menu__logout { padding: .75rem 1.1rem 0; margin-top: .5rem; border-top: 1px solid var(--shop-line); }
.customer-menu__logout button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .35rem 0; border: 0; color: var(--shop-text-muted); background: transparent; font-size: var(--shop-text-sm); font-weight: 600; }
.customer-menu__logout button:hover { color: var(--shop-accent); }
.customer-heading, .inquiry-heading { max-width: 46rem; margin-bottom: 2rem; }
.customer-heading h1, .inquiry-heading h1, .customer-auth h1 { max-width: 18ch; margin: 0 0 .75rem; font-size: var(--shop-text-3xl); }
.customer-heading > p:last-child, .inquiry-heading > p:last-child, .customer-auth > p:not(.shop-eyebrow) { max-width: 38rem; margin: 0; color: var(--shop-text); font-size: var(--shop-text-base); line-height: 1.6; }
.customer-auth { max-width: 34rem; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.5rem); box-shadow: var(--shop-shadow); }
.customer-auth .shop-eyebrow { margin-bottom: .6rem; }
.customer-form { margin-top: 1.5rem; }
.customer-form .shop-button-primary { justify-self: start; }
.customer-auth__footer, .customer-auth > p.customer-auth__footer { margin: 1.25rem 0 0; font-size: var(--shop-text-sm); }
.customer-auth__footer a, .customer-back a, .inquiry-form-actions a { color: var(--shop-navy); font-weight: 700; }
.customer-action-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.customer-action-card { display: grid; min-height: 12rem; padding: 1.4rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); color: var(--shop-ink); background: var(--shop-canvas); text-decoration: none; transition: transform var(--shop-transition), box-shadow var(--shop-transition); }
.customer-action-card:hover { color: var(--shop-navy); box-shadow: var(--shop-shadow); transform: translateY(-2px); }
.customer-action-card > span { color: var(--shop-accent); font-size: var(--shop-text-xs); font-weight: 800; letter-spacing: .1em; }
.customer-action-card strong { align-self: end; font-size: var(--shop-text-lg); font-style: italic; font-weight: 800; text-transform: uppercase; }
.customer-action-card small { color: var(--shop-text); font-size: var(--shop-text-sm); line-height: 1.5; }
.customer-action-card b { margin-top: 1rem; font-size: var(--shop-text-sm); }
.customer-action-card--accent { color: var(--shop-text-on-dark); background: var(--shop-navy); border-color: var(--shop-navy); }
.customer-action-card--accent:hover { color: var(--shop-text-on-dark); }
.customer-action-card--accent small { color: var(--shop-text-on-dark-muted); }
.customer-action-card--accent > span { color: var(--shop-text-on-dark-muted); /* Rot auf Navy erreichte nur 1,9:1 */ }
.customer-logout { margin-top: 2rem; }
.customer-logout button, .inquiry-line-list button { padding: 0; border: 0; color: var(--shop-text-muted); background: transparent; font-size: var(--shop-text-sm); font-weight: 700; text-decoration: underline; }
.customer-logout button:hover, .inquiry-line-list button:hover { color: var(--shop-accent); }
.inquiry-panel { padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; }
.inquiry-line-list { display: grid; }
.inquiry-line-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--shop-line); }
.inquiry-line-list article:first-child { padding-top: 0; border-top: 0; }
.inquiry-line-list strong, .inquiry-line-list small { display: block; }
.inquiry-line-list strong a { color: var(--shop-ink); text-decoration: none; }
.inquiry-line-list strong a:hover { color: var(--shop-navy); }
.inquiry-line-list small { margin-top: .2rem; color: var(--shop-text-muted); }
.inquiry-panel__footer, .inquiry-form-actions { justify-content: space-between; padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--shop-line); color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.inquiry-summary { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.inquiry-summary li { padding-bottom: .5rem; border-bottom: 1px solid var(--shop-line); }
.inquiry-summary span { display: inline-block; min-width: 3rem; color: var(--shop-text-muted); font-weight: 700; }
.inquiry-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.customer-inquiry-card { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1rem 0; border-bottom: 1px solid var(--shop-line); color: var(--shop-ink); text-decoration: none; }
.customer-inquiry-card:hover strong { color: var(--shop-navy); text-decoration: underline; }
.customer-inquiry-card:first-child { padding-top: 0; }
.customer-inquiry-card:last-child { padding-bottom: 0; border-bottom: 0; }
.customer-inquiry-card strong, .customer-inquiry-card small { display: block; }
.customer-inquiry-card small { margin-top: .2rem; color: var(--shop-text-muted); }
.customer-inquiry-card__status { justify-self: start; }
.inquiry-documents { padding: 0; margin: 0; list-style: none; }
.inquiry-documents li + li { border-top: 1px solid var(--shop-line); }
.inquiry-documents a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 0; color: var(--shop-ink); font-weight: 700; text-decoration: none; }
.inquiry-documents a:hover { color: var(--shop-navy); }
.inquiry-documents span { color: var(--shop-accent); font-size: var(--shop-text-sm); }
.inquiry-conversation { display: grid; gap: .85rem; }
.inquiry-conversation h2 { margin-bottom: 1rem; }
.inquiry-message { padding: 1rem 1.1rem; border-left: .25rem solid var(--shop-line); border-radius: 0 var(--shop-radius) var(--shop-radius) 0; background: var(--shop-surface); }
.inquiry-message.is-customer { border-left-color: var(--shop-accent); }
.inquiry-message.is-backoffice { border-left-color: var(--shop-navy); background: var(--shop-navy-soft); }
.inquiry-message.is-internal { border-left-color: #b45309; background: var(--shop-warning-soft); }
.inquiry-message strong { display: block; color: var(--shop-ink); }
.inquiry-message time { display: block; margin-top: .2rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.inquiry-message p { margin: .75rem 0 0; white-space: normal; }

/* --------------------------------------------------------------------------
   15. CMS-Seiten, News, Fehlerseiten
   -------------------------------------------------------------------------- */
.content-page { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.content-page-inner { max-width: 54rem; }
.content-page h1 { max-width: 24ch; margin: 0 0 1.25rem; font-size: var(--shop-text-3xl); } /* ruhiger: Seitentitel wie Katalog und Konto, Display-Größe bleibt dem Hero vorbehalten (a62) */
.content-page h2 { max-width: 24ch; margin: 2.5rem 0 1rem; font-size: var(--shop-text-2xl); }
.content-page h3 { max-width: 28ch; margin: 2rem 0 .75rem; }
.content-page-text { max-width: 44rem; margin: 0 0 1.5rem; color: var(--shop-text); font-size: var(--shop-text-base); line-height: 1.75; }
.content-page-notice { max-width: 44rem; margin: 2rem 0; }
.content-page-notice h2 { margin: 0 0 .5rem; font-size: var(--shop-text-xl); }
.content-page-notice h2 a { color: inherit; text-decoration: none; }
.content-page-notice h2 a:hover { color: var(--shop-navy); }
.content-page-empty { color: var(--shop-text-muted); }
.content-page-preview { padding: .7rem 0; color: var(--shop-text-on-dark); background: var(--shop-accent); font-size: var(--shop-text-sm); font-weight: 700; letter-spacing: .02em; }
.content-page-image { max-width: 44rem; margin: 2rem 0; }
.content-page-image img { display: block; width: 100%; height: auto; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
.content-page-image figcaption { margin-top: .65rem; color: var(--shop-text-muted); font-size: var(--shop-text-sm); line-height: 1.5; }
.content-product-grid, .content-category-grid { margin: 2.5rem 0; }
.content-product-grid__heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.content-product-grid__heading h2, .content-category-grid h2 { margin: 0 0 1rem; font-size: var(--shop-text-2xl); }
.content-product-grid__heading a { font-weight: 700; text-decoration: none; }
.content-post-list { display: grid; gap: 1.25rem; }
.content-post-list .content-page-notice { margin: 0; border-left-color: var(--shop-navy); background: var(--shop-canvas); border: 1px solid var(--shop-line); border-left: .3rem solid var(--shop-navy); border-radius: var(--shop-radius); }
.shop-news-card { display: grid; gap: .5rem; height: 100%; padding: 1.25rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.shop-news-card time { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.shop-news-card h2, .shop-news-card h3 { margin: 0; font-size: var(--shop-text-lg); }
.shop-news-card p { margin: 0; font-size: var(--shop-text-sm); }
.shop-error { display: grid; min-height: 28rem; place-items: center start; padding: clamp(3rem, 8vw, 6rem) 0; background: var(--shop-surface); }
.shop-error h1 { max-width: 20ch; margin-bottom: 1.25rem; font-size: var(--shop-text-3xl); }
.shop-error .shop-intro { margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   16. Verwaltung außerhalb von EasyAdmin (Login, Sicherheit, Zugänge)
   -------------------------------------------------------------------------- */
.theme-swatch { height: 7rem; border-radius: var(--shop-radius); }
.theme-swatch-light { background: linear-gradient(135deg, #f8fafc 0 62%, #0f766e 62%); }
.theme-swatch-dark { background: linear-gradient(135deg, #18181b 0 62%, #67e8f9 62%); }
.theme-swatch-contrast { background: linear-gradient(135deg, #fff 0 62%, #111827 62%); border: 1px solid #111827; }
.theme-swatch-warm { background: linear-gradient(135deg, #fff7ed 0 62%, #b45309 62%); }
.admin-workspace { min-height: 100vh; padding: clamp(2rem, 6vw, 5rem) 1rem; color: var(--shop-ink); background: var(--shop-surface); }
.admin-workspace-inner { max-width: 62rem; margin: 0 auto; }
.admin-workspace-inner--narrow { max-width: 48rem; }
.admin-workspace-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.admin-workspace-title { margin: 0; font-size: var(--shop-text-3xl); }
.admin-workspace-back { color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.admin-workspace-back:hover { text-decoration: underline; }
.admin-workspace-header__links { display: flex; gap: 1rem; align-items: center; }
.admin-panel { padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shop-shadow); }
.admin-panel + .admin-panel { margin-top: 1.5rem; }
.admin-panel > h2 { margin: 0 0 1rem; font-size: var(--shop-text-xl); }
.admin-detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0; }
.admin-detail-list div { padding-bottom: .75rem; border-bottom: 1px solid var(--shop-line); }
.admin-detail-list dt { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-detail-list dd { margin: .3rem 0 0; font-weight: 600; }
.admin-form .mb-3 { margin-bottom: 1.25rem !important; }
.admin-form input[type="file"] { width: 100%; padding: .5rem; border: 1px dashed var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-surface); color: var(--shop-text); font-size: var(--shop-text-sm); }
.admin-form input[type="file"]::file-selector-button { padding: .45rem .75rem; margin-right: .7rem; border: 0; border-radius: var(--shop-radius); color: var(--shop-text-on-dark); background: var(--shop-navy); font-weight: 700; }
.admin-form .form-check { padding: .9rem 1rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.admin-submit-row { margin-top: 1.5rem; }
.admin-subtle-link { color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; }
.admin-document-list { padding: 0; margin: 1rem 0 0; list-style: none; }
.admin-document-list li { padding: .8rem 0; border-top: 1px solid var(--shop-line); color: var(--shop-text); }
.admin-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.admin-theme-card { padding: 1.25rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.admin-theme-card.is-active { border: 2px solid var(--shop-navy); }
.admin-theme-card h2 { margin: 1rem 0 .25rem; font-size: var(--shop-text-lg); }
.admin-theme-card p { margin: 0 0 1rem; color: var(--shop-text); font-size: var(--shop-text-sm); }
.admin-auth { display: grid; min-height: 100vh; grid-template-columns: 1fr; color: var(--shop-ink); background: var(--shop-surface); }
.admin-auth__panel { width: min(100%, 34rem); padding: clamp(2rem, 8vw, 6rem) 1rem; margin: auto; }
.admin-auth__brand { display: inline-flex; align-items: center; gap: .65rem; margin-bottom: clamp(2rem, 6vw, 5rem); color: var(--shop-navy); font-size: var(--shop-text-sm); font-style: italic; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.admin-auth__brand small { display: block; margin-top: .1rem; color: var(--shop-text-muted); font-size: .6rem; font-style: normal; letter-spacing: .14em; }
.admin-auth h1 { max-width: 12ch; margin: 0 0 1rem; }
.admin-auth__intro { max-width: 32rem; margin: 0; color: var(--shop-text); font-size: var(--shop-text-base); line-height: 1.65; }
.admin-auth__form { display: grid; gap: 1.2rem; margin-top: 2rem; }
.admin-auth__form .shop-button-primary { justify-self: start; margin-top: .25rem; }
.admin-auth__hint { margin: 1.25rem 0 0; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.admin-auth__hint a { color: var(--shop-navy); font-weight: 700; }
.admin-auth__notice { padding: 1rem; margin-top: 1.5rem; border-left: .3rem solid var(--shop-danger); border-radius: var(--shop-radius); color: var(--shop-danger); background: var(--shop-danger-soft); font-size: var(--shop-text-sm); }
.admin-auth__providers { display: flex; gap: .5rem; margin-top: 1.4rem; }
.admin-auth__providers a { padding: .35rem .5rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; text-decoration: none; }
.admin-auth__checkbox { display: flex !important; align-items: center; gap: .55rem; font-size: var(--shop-text-sm) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.admin-auth__checkbox input { width: 1.25rem; height: 1.25rem; accent-color: var(--shop-navy); }
.admin-auth__aside { display: none; min-height: 100%; padding: clamp(2rem, 6vw, 5rem); color: var(--shop-text-on-dark); background: var(--shop-navy); }
.admin-auth__aside-inner { align-self: end; max-width: 22rem; }
.admin-auth__aside-inner span { display: block; margin-bottom: 3rem; color: var(--shop-text-on-dark-muted); font-size: var(--shop-text-xs); font-weight: 800; letter-spacing: .12em; }
.admin-auth__aside-inner strong { display: block; max-width: 12ch; font-size: var(--shop-text-display); font-style: italic; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.admin-auth__aside-inner p { color: var(--shop-text-on-dark-muted); line-height: 1.65; }
.admin-security-flash { padding: 1rem 1.2rem; margin-bottom: 1rem; border-left: .3rem solid var(--shop-navy); border-radius: var(--shop-radius); background: var(--shop-canvas); font-weight: 600; }
.admin-security-flash.is-danger { border-color: var(--shop-danger); color: var(--shop-danger); background: var(--shop-danger-soft); }
.admin-security-overview { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
.admin-security-overview h2, .admin-security-setup h2, .admin-security-actions h2, .admin-security-danger h2, .admin-recovery-codes h2 { margin: 0 0 .8rem; font-size: var(--shop-text-xl); }
.admin-security-overview p:not(.shop-eyebrow), .admin-security-setup p, .admin-security-actions p, .admin-security-danger p, .admin-recovery-codes p { max-width: 42rem; margin: 0; color: var(--shop-text); line-height: 1.65; }
.admin-security-state { display: grid; min-width: 10rem; place-items: center; padding: 1.25rem; border: 1px solid #e6cb8b; border-radius: var(--shop-radius); color: var(--shop-warning); background: var(--shop-warning-soft); text-align: center; }
.admin-security-state.is-secure { border-color: #b7dcc6; color: var(--shop-success); background: var(--shop-success-soft); }
.admin-security-state span { display: grid; width: 2rem; height: 2rem; place-items: center; margin-bottom: .55rem; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
.admin-security-state small { display: block; margin-top: .25rem; font-size: var(--shop-text-xs); }
.admin-security-setup ol { display: grid; gap: .55rem; padding-left: 1.25rem; margin: 1.5rem 0; color: var(--shop-text); line-height: 1.5; }
.admin-security-secret { display: grid; gap: .45rem; max-width: 32rem; padding: 1rem; margin: 1.25rem 0; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); }
.admin-security-secret span { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-security-secret code, .admin-recovery-codes__grid code { color: var(--shop-ink); font-size: var(--shop-text-base); font-weight: 800; letter-spacing: .1em; }
.admin-security-code-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; margin-top: 1.5rem; }
.admin-security-code-form > div { min-width: min(100%, 20rem); flex: 1; }
.admin-security-code-form button { width: 100%; min-height: 2.875rem; }
.admin-security-actions, .admin-security-danger { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: end; }
.admin-security-danger { border-color: #efb4ae; }
.admin-recovery-codes__grid { display: grid; grid-template-columns: 1fr; gap: .7rem 1.5rem; max-width: 34rem; padding: 1.25rem; margin: 1.5rem 0; border-radius: var(--shop-radius); background: var(--shop-surface); }
.admin-recovery-codes__grid code { font-size: var(--shop-text-sm); }
.admin-audit-log__list { display: grid; }
.admin-audit-log__list article { display: grid; grid-template-columns: 1fr; gap: .25rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--shop-line); }
.admin-audit-log__list time, .admin-audit-log__list small { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.admin-audit-log__list strong, .admin-audit-log__list span { display: block; }
.admin-audit-log__list span { margin-top: .2rem; color: var(--shop-text); font-size: var(--shop-text-sm); }
.admin-access-header { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 1rem 1.5rem; }
.admin-access-header h2 { margin: 0 0 .55rem; font-size: var(--shop-text-xl); }
.admin-access-header p { max-width: 40rem; margin: 0; color: var(--shop-text); line-height: 1.6; }
.admin-access-header .shop-button-primary { flex: 0 0 auto; width: 100%; text-decoration: none; }
.admin-access-list { padding-top: .4rem; padding-bottom: .4rem; }
.admin-access-list article { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--shop-line); }
.admin-access-list article:last-child { border-bottom: 0; }
.admin-access-list strong, .admin-access-list span { display: block; }
.admin-access-list span { margin-top: .2rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.admin-access-roles { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-access-form { display: grid; gap: 1.8rem; }
.admin-access-form fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.admin-access-form legend { float: none; width: auto; margin-bottom: 1rem; font-size: var(--shop-text-lg); font-weight: 700; }
.admin-access-checkbox { display: grid; gap: .35rem; }
.admin-access-checkbox label, .admin-access-role-grid label { display: flex; align-items: flex-start; gap: .65rem; }
.admin-access-checkbox input, .admin-access-role-grid input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--shop-navy); }
.admin-access-checkbox small, .admin-access-role-grid small, .admin-access-form .mb-3 small { display: block; margin-top: .25rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); line-height: 1.45; }
.admin-access-role-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.admin-access-role-grid label { min-height: 0; padding: 1rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); cursor: pointer; }
.admin-access-role-grid label:has(input:checked) { border-color: var(--shop-navy); background: var(--shop-navy-soft); }
.admin-access-role-grid strong { display: block; margin-bottom: .35rem; font-size: var(--shop-text-sm); }
.admin-access-role-grid small { margin-top: 0; }

/* --------------------------------------------------------------------------
   17. Styleguide (/admin/styleguide, nur Backoffice)
   -------------------------------------------------------------------------- */
.styleguide { padding: clamp(2rem, 5vw, 4rem) 0 5rem; }
.styleguide__header { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--shop-line); }
.styleguide__toc { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.styleguide__toc a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .75rem; border: 1px solid var(--shop-line-strong); border-radius: 999px; color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; text-decoration: none; }
.styleguide__toc a:hover { color: var(--shop-navy); border-color: var(--shop-navy); background: var(--shop-navy-soft); }
.styleguide__section { padding: 2.5rem 0; border-bottom: 1px solid var(--shop-line); scroll-margin-top: 1rem; }
.styleguide__section > h2 { margin-bottom: .35rem; font-size: var(--shop-text-2xl); }
.styleguide__section > p { max-width: 48rem; margin: 0 0 1.5rem; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.styleguide__block { margin-bottom: 2rem; }
.styleguide__block > h3 { margin-bottom: 1rem; font-size: var(--shop-text-base); font-style: normal; letter-spacing: .1em; color: var(--shop-text-muted); }
.styleguide__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.styleguide__swatch { overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
.styleguide__swatch-color { height: 5rem; }
.styleguide__swatch-color--navy { background: var(--shop-navy); }
.styleguide__swatch-color--navy-hover { background: var(--shop-navy-hover); }
.styleguide__swatch-color--navy-soft { background: var(--shop-navy-soft); }
.styleguide__swatch-color--ink { background: var(--shop-ink); }
.styleguide__swatch-color--accent { background: var(--shop-accent); }
.styleguide__swatch-color--accent-hover { background: var(--shop-accent-hover); }
.styleguide__swatch-color--accent-soft { background: var(--shop-accent-soft); }
.styleguide__swatch-color--canvas { background: var(--shop-canvas); }
.styleguide__swatch-color--surface { background: var(--shop-surface); }
.styleguide__swatch-color--surface-strong { background: var(--shop-surface-strong); }
.styleguide__swatch-color--line { background: var(--shop-line); }
.styleguide__swatch-color--text { background: var(--shop-text); }
.styleguide__swatch-color--text-muted { background: var(--shop-text-muted); }
.styleguide__swatch-color--success { background: var(--shop-success); }
.styleguide__swatch-color--warning { background: var(--shop-warning); }
.styleguide__swatch-color--danger { background: var(--shop-danger); }
.styleguide__swatch dl { display: grid; gap: .1rem; margin: 0; padding: .75rem .85rem; font-size: var(--shop-text-xs); }
.styleguide__swatch dt { color: var(--shop-ink); font-weight: 700; }
.styleguide__swatch dd { margin: 0; color: var(--shop-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.styleguide__type { display: grid; gap: 1.25rem; }
.styleguide__type > div { display: grid; gap: .25rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--shop-line); }
.styleguide__type > div > * { margin: 0; }
.styleguide__type small { color: var(--shop-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--shop-text-xs); }
.styleguide__row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.styleguide__dark { padding: 1.25rem; border-radius: var(--shop-radius); background: var(--shop-navy); }
.styleguide__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.styleguide__form { max-width: 36rem; }
.styleguide__code { display: inline-block; padding: .1rem .4rem; border-radius: .2rem; background: var(--shop-surface); color: var(--shop-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--shop-text-xs); }
.styleguide__card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* --------------------------------------------------------------------------
   18. Responsive Anpassungen (Mobile zuerst: 390 → 820 → 1440)
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
    .shop-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .styleguide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .styleguide__card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inquiry-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-inquiry-card { grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.5rem; align-items: center; }
}

@media (min-width: 768px) {
    .shop-utility__inner { min-height: 3.5rem; gap: 1rem; }
    .shop-search { max-width: 20rem; }
    .shop-masthead__inner { min-height: 4rem; }
    .shop-masthead .shop-brand { order: 0; margin-left: 0; padding: .75rem 1.5rem; }
    .shop-brand img, .shop-brand-logo { height: 2.25rem; }
    .shop-mobile-toggle, .shop-navigation-mobile { display: none !important; }
    .shop-navigation { display: flex; }
    .shop-navigation__link { font-size: .75rem; letter-spacing: .06em; padding: .6rem .5rem; }
    .shop-navigation__toggle { width: 2rem; padding-right: .25rem; }
    .shop-benefits-grid { grid-template-columns: repeat(4, 1fr); }
    .shop-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .catalog-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 2.5rem; }
    .customer-area__layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
    .customer-area__layout--single { grid-template-columns: 1fr; }
    .customer-menu { position: sticky; top: 1rem; }
    .admin-auth { grid-template-columns: minmax(0, 1fr) minmax(20rem, 42%); }
    .admin-auth__aside { display: grid; }
    .admin-auth__panel { padding-left: 1.5rem; padding-right: 1.5rem; }
    .admin-security-overview { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; }
    .admin-security-actions, .admin-security-danger { grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); gap: 2rem; }
    .admin-recovery-codes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-security-code-form button { width: auto; }
    .admin-audit-log__list article { grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1rem; }
    .admin-access-header { flex-direction: row; align-items: flex-end; }
    .admin-access-header .shop-button-primary { width: auto; }
    .admin-access-list article { grid-template-columns: minmax(14rem, 1.3fr) minmax(12rem, 1fr) auto auto; gap: 1rem; }
    .admin-access-role-grid { grid-template-columns: repeat(3, 1fr); }
    .admin-access-role-grid label { min-height: 8rem; }
    .styleguide__card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .styleguide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .shop-utility__label { display: inline; }
    .shop-admin-link--header { display: inline-flex; }
    .shop-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem 1.5rem; }
    .shop-navigation__link { font-size: .875rem; letter-spacing: .1em; padding: .85rem 1.25rem; }
    .shop-navigation__item--has-menu > .shop-navigation__link { padding-right: .5rem; }
    .shop-navigation__toggle { width: 2.75rem; padding-right: .75rem; }
    .shop-brand img, .shop-brand-logo { height: 2.5rem; }
    .shop-masthead .shop-brand { padding: .75rem 2rem; }
    .shop-hero { padding: clamp(4rem, 9vw, 7rem) 0; }
    .customer-area__layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
    .catalog-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; }
}

@media (max-width: 991.98px) {
    .shop-admin-link--header { display: none; }
}

/* 820 px: kompakte Navigation in einer Zeile, Suche rückt zusammen */
@media (min-width: 768px) and (max-width: 991.98px) {
    .shop-search { max-width: 14rem; }
    .shop-navigation__link { white-space: nowrap; font-size: .7rem; letter-spacing: .04em; padding: .5rem .55rem; }
    .shop-navigation__item--has-menu > .shop-navigation__link { padding-right: .15rem; }
    .shop-mega__inner { padding: 1.25rem 1rem 1rem; }
}

@media (min-width: 1200px) {
    .shop-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mega-Menü per Hover (nur Geräte mit Mauszeiger); Tastatur und Touch nutzen den Umschalter */
@media (min-width: 768px) and (hover: hover) {
    .shop-navigation__item--has-menu:hover > .shop-mega { display: block; }
}
/* Tastatur: Das Mega-Menü öffnet ausschließlich über den Umschalter (aria-expanded). Ein automatisches Öffnen bei Fokus
   widersprach dem Umschalterzustand und zog den Fokus in ein anschließend ausgeblendetes Panel. */

@media (max-width: 767.98px) {
    .shop-utility__inner { min-height: 3rem; }
    .shop-utility__link { padding: .4rem .45rem; }
    .inquiry-line-list article { grid-template-columns: 1fr; gap: .45rem; }
    .inquiry-panel__footer, .inquiry-form-actions { align-items: flex-start; flex-direction: column; }
    .inquiry-documents a { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .catalog-meta, .catalog-filters-heading { align-items: flex-start; flex-direction: column; }
    .shop-table--responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .shop-table--responsive tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--shop-line); }
    .shop-table--responsive td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; text-align: right; }
    .shop-table--responsive td::before { content: attr(data-label); flex: 0 0 auto; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
    .shop-table--responsive .is-numeric { text-align: right; }
}

@media (max-width: 575.98px) {
    /* Zielgröße mobil mindestens 24 × 24 px (WCAG 2.5.8) auch für Kontrollkästchen und Optionsfelder (a62) */
    .shop-check input[type="checkbox"], .shop-check input[type="radio"], .shop-check__input, .shop-form input[type="checkbox"], .shop-form input[type="radio"], .customer-form input[type="checkbox"], .site-form-block input[type="checkbox"], .checkout-choice__input { width: 1.5rem; height: 1.5rem; }
    .shop-search { max-width: none; }
    .shop-language { margin-left: 0; padding-left: .25rem; }
    .shop-button--mobile-block { width: 100%; }
}

/* Ehemals public/catalog-filter-polish.css – aktive Filter-Chips, auf CI-Tokens umgestellt */
.catalog-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -1rem 0 1.25rem; }.catalog-active-filters > span { color: var(--shop-text); font-size: .8rem; font-weight: 800; }.catalog-active-filters a { display: inline-flex; gap: .45rem; align-items: center; padding: .35rem .55rem; border: 1px solid var(--shop-line); color: var(--shop-ink); background: var(--shop-surface); font-size: .82rem; font-weight: 700; text-decoration: none; }.catalog-active-filters a:hover { border-color: var(--shop-navy); background: var(--shop-surface); }.catalog-active-filters b { font-size: 1rem; line-height: .8; }

/* Ehemals public/content-widget.css – CMS-Produkt- und Kategorieraster */
.content-product-grid { margin: 3rem 0; }.content-product-grid__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }.content-product-grid__heading h2 { margin: 0; }.content-product-grid__heading a { color: var(--shop-navy); font-size: .88rem; font-weight: 800; text-decoration: none; } /* Navy wie die übrigen „Alle anzeigen“-Links (a62) */.content-product-grid .catalog-card h3 { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -.025em; }@media (max-width: 575px) { .content-product-grid__heading { align-items: start; flex-direction: column; } }
.content-category-grid { margin: 3rem 0; }.content-category-grid > h2 { margin: 0 0 1.25rem; }.content-category-card { display: grid; min-height: 11rem; padding: 1.25rem; border: 1px solid var(--shop-line); color: var(--shop-ink); background: linear-gradient(145deg, #fff 0%, var(--shop-surface) 100%); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }.content-category-card:hover { color: var(--shop-ink); box-shadow: .35rem .35rem 0 rgba(24, 57, 97, .12); transform: translate(-.12rem, -.12rem); }.content-category-card span { color: var(--shop-accent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.content-category-card strong { align-self: end; font-size: 1.2rem; letter-spacing: -.035em; }.content-category-card b { margin-top: .75rem; font-size: .84rem; }.content-category-card i { font-style: normal; }
.content-category-card:focus-visible { outline: 3px solid var(--shop-accent); outline-offset: 3px; color: var(--shop-ink); }

/* --------------------------------------------------------------------------
   Rechtes Offcanvas (E-52): Warenkorb, Anfragekorb, Mietliste
   Bootstrap-Offcanvas mit Reitern; Inhalt wird privat nachgeladen (assets/js/side-panel.js).
   -------------------------------------------------------------------------- */
.shop-side-panel { --bs-offcanvas-width: min(28rem, 100vw); --bs-offcanvas-padding-x: 1.25rem; --bs-offcanvas-padding-y: 1rem; color: var(--shop-text); font-family: var(--shop-font); }
.shop-side-panel__header { border-bottom: 1px solid var(--shop-line); background: var(--shop-navy); color: var(--shop-text-on-dark); }
.shop-side-panel__title { margin: 0; color: var(--shop-text-on-dark); font-size: var(--shop-text-lg); font-weight: 700; }
.shop-side-panel__close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .9; }
.shop-side-panel__close:focus-visible { outline: 3px solid var(--shop-text-on-dark); outline-offset: 2px; box-shadow: none; }
.shop-side-panel__body { display: grid; align-content: start; gap: 1rem; }
.shop-side-panel__loading, .shop-side-panel__empty { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
.shop-side-panel__content { display: grid; gap: 1rem; min-width: 0; }
.shop-side-panel__message { margin: 0; padding: .65rem .85rem; border-left: .25rem solid var(--shop-success); border-radius: var(--shop-radius); background: var(--shop-success-soft); color: var(--shop-success); font-size: var(--shop-text-sm); font-weight: 600; }
.shop-side-panel__tabs { flex-wrap: nowrap; gap: .25rem; border-bottom: 1px solid var(--shop-line); }
.shop-side-panel__tabs .nav-item { flex: 1 1 0; min-width: 0; }
.shop-side-panel__tab { display: flex; width: 100%; align-items: center; justify-content: center; gap: .35rem; min-height: 2.75rem; padding: .5rem .4rem; border-radius: var(--shop-radius) var(--shop-radius) 0 0; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; white-space: nowrap; }
.shop-side-panel__tab:hover { color: var(--shop-navy); background: var(--shop-surface); }
.shop-side-panel__tab.active { color: var(--shop-navy); border-color: var(--shop-line) var(--shop-line) var(--shop-canvas); background: var(--shop-canvas); box-shadow: inset 0 3px 0 var(--shop-accent); }
.shop-side-panel__tab:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: -3px; box-shadow: none; }
.shop-side-panel__tab.active:focus-visible { box-shadow: inset 0 3px 0 var(--shop-accent); }
.shop-side-panel__tab > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.shop-side-panel__count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 1rem; background: var(--shop-surface-strong); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; line-height: 1; }
.shop-side-panel__count--filled { background: var(--shop-navy); color: var(--shop-text-on-dark); }
.shop-side-panel__panes .tab-pane { display: none; }
.shop-side-panel__panes .tab-pane.active { display: grid; gap: 1rem; }
.shop-side-panel__panes .tab-pane:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
.shop-side-panel__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.shop-side-panel__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: .5rem .75rem; padding: .85rem 0; border-bottom: 1px solid var(--shop-line); }
.shop-side-panel__item-main { display: grid; gap: .25rem; min-width: 0; }
.shop-side-panel__name { color: var(--shop-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.shop-side-panel__name:hover { color: var(--shop-navy); text-decoration: underline; }
.shop-side-panel__meta { color: var(--shop-text-muted); font-size: var(--shop-text-xs); overflow-wrap: anywhere; }
.shop-side-panel__amount { color: var(--shop-ink); font-weight: 700; white-space: nowrap; }
.shop-side-panel__remove { margin: 0; }
.shop-side-panel__remove .shop-button-link { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
.shop-side-panel__item--rental { grid-template-columns: minmax(0, 1fr) auto; }
.shop-side-panel__total { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: var(--shop-ink); }
.shop-side-panel__note { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); line-height: 1.5; white-space: pre-line; }
.shop-side-panel__actions { display: grid; gap: .5rem; }
.shop-side-panel__actions > a { justify-content: center; width: 100%; text-align: center; }

/* Mietdaten einer Position (Mietliste, Offcanvas, Kundenkonto; E-50/E-51) */
.rental-summary { display: grid; gap: .35rem; margin: .5rem 0 0; font-size: var(--shop-text-sm); }
.rental-summary > div { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: .75rem; }
.rental-summary dt { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rental-summary dd { margin: 0; color: var(--shop-ink); overflow-wrap: anywhere; }
.rental-summary__days, .rental-summary__group { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
.rental-summary__accessories { margin: 0; padding-left: 1rem; }
.rental-summary--compact { gap: .3rem; font-size: var(--shop-text-xs); }
.rental-summary--compact dd { font-size: var(--shop-text-sm); } /* Werte nicht kleiner als ihre Beschriftung (a62) */
.rental-summary--compact > div { grid-template-columns: 1fr; gap: 0; }
.rental-summary .shop-badge { margin-right: .35rem; white-space: normal; text-align: left; }
.rental-liability-note { white-space: pre-line; }

/* 390 px: vier Kopf-Links (Konto, Anfragekorb, Mietliste, Warenkorb) plus Sprache passen ohne waagerechtes Scrollen;
   das Suchfeld gibt den Platz ab (Zielgrößen bleiben ≥ 24 px breit und 44 px hoch). */
@media (max-width: 575.98px) {
    .shop-utility__inner { gap: .25rem; }
    .shop-search { flex-basis: 3rem; }
    .shop-utility__actions { gap: 0; }
    .shop-utility__link { gap: .2rem; padding: .4rem .25rem; }
    .shop-language a { min-width: 1.85rem; padding: .25rem .2rem; }
    .shop-side-panel__item { grid-template-columns: minmax(0, 1fr) auto; }
    .shop-side-panel__amount { grid-column: 1; }
    .rental-summary > div { grid-template-columns: 1fr; gap: .1rem; }
    .shop-side-panel__tab { flex-direction: column; gap: .15rem; padding: .4rem .25rem; font-size: var(--shop-text-xs); }
}


/* --------------------------------------------------------------------------
   19. Layoutvarianten des Shop-Designs und Slot-Bereiche (Paket P8, docs/Themes_01.md)
   Kopf „compact“ (partials/header/_compact.html.twig): eine Zeile ab 992 px, darunter
   Menü-Knopf mit aufklappendem Bereich; „Produkte“ als Bootstrap-Dropdown der
   Wurzelkategorien. Filter, Galerie und Spalten: catalog.css (data-*-Attribute am <body>).
   -------------------------------------------------------------------------- */
.shop-header--compact { border-bottom: 1px solid var(--shop-line); }
/* Unter 992 px (E-73, Design-Review Nr. 35): Kopfzeile Logo | Lupe | Konto | Anfragekorb | Mietliste | Warenkorb | Menü;
   darunter (je nach Zustand) das Menü, das per Lupe aufgeklappte Suchfeld und – bei offenem Menü – Sprachwahl und Slot.
   Ohne JavaScript bleibt die Lupe verborgen und das Suchfeld sichtbar (assets/js/header-search.js setzt is-collapsed). */
.shop-compact__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0; min-height: 3.75rem; padding-top: .5rem; padding-bottom: .5rem; }
.shop-header--compact .shop-brand { flex: 0 1 auto; min-width: 0; margin-right: auto; padding: .55rem .9rem; }
.shop-header--compact .shop-brand img, .shop-header--compact .shop-brand-logo { height: 1.75rem; }
.shop-compact__search-toggle { display: none; }
.shop-compact__search-toggle:not([hidden]) { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: var(--shop-radius); background: transparent; color: var(--shop-ink); }
.shop-compact__search-toggle:hover, .shop-compact__search-toggle[aria-expanded="true"] { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-compact__quick { flex: 0 0 auto; gap: 0; margin-left: 0; }
.shop-compact__toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-width: 3.25rem; min-height: 2.75rem; margin-left: .25rem; padding: .35rem .45rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.shop-compact__toggle:hover, .shop-compact__toggle[aria-expanded="true"] { color: var(--shop-navy); background: var(--shop-navy-soft); }
.shop-compact__panel { flex: 1 0 100%; min-width: 0; padding: .25rem 0 .5rem; }
.shop-compact__list { display: grid; margin: 0; padding: 0; list-style: none; }
.shop-compact__item { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--shop-line); }
.shop-compact__link { display: flex; flex: 1 1 auto; align-items: center; min-height: 3rem; padding: .6rem 0; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.shop-compact__link:hover, .shop-compact__link.is-active { color: var(--shop-navy); }
.shop-compact__link:focus-visible, .shop-compact__menu-toggle:focus-visible { outline-offset: -3px; }
.shop-compact__menu-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 3rem; min-height: 3rem; padding: 0; border: 0; background: transparent; color: var(--shop-ink); }
.shop-compact__menu-toggle:hover, .shop-compact__menu-toggle[aria-expanded="true"] { color: var(--shop-navy); }
.shop-compact__dropdown { --bs-dropdown-min-width: 100%; --bs-dropdown-padding-y: .35rem; --bs-dropdown-border-color: var(--shop-line); --bs-dropdown-border-radius: var(--shop-radius); --bs-dropdown-font-size: var(--shop-text-sm); --bs-dropdown-link-color: var(--shop-ink); --bs-dropdown-link-hover-color: var(--shop-navy); --bs-dropdown-link-hover-bg: var(--shop-surface); --bs-dropdown-link-active-color: var(--shop-text-on-dark); --bs-dropdown-link-active-bg: var(--shop-navy); --bs-dropdown-item-padding-x: .85rem; max-height: min(70vh, 32rem); overflow-y: auto; font-family: var(--shop-font); }
.shop-compact__dropdown .dropdown-item { display: flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 600; white-space: normal; }
.shop-compact__dropdown .dropdown-item:focus-visible { outline-offset: -3px; }
.shop-compact__dropdown-all { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--shop-line); }
.shop-compact__dropdown-all .dropdown-item { font-weight: 700; }
.shop-compact__search { display: flex; flex: 1 0 100%; min-width: 0; padding: .5rem 0 .25rem; }
.shop-compact__search.is-collapsed { display: none; }
.shop-header--compact .shop-search { flex: 1 1 auto; max-width: none; margin: 0; }
.shop-compact__actions { display: none; flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; padding: 0 0 .25rem; }
.shop-compact__panel.show ~ .shop-compact__actions { display: flex; }
.shop-compact__actions > .shop-utility__link { display: none; }
.shop-compact__actions .shop-language { margin-left: 0; padding-left: 0; border-left: 0; }
.shop-header--compact .shop-admin-link--header { display: none; }

/* Symbol-Links der mobilen Kopfzeilen (kompakt unter 992 px, Standardkopf unter 768 px): 44 px Zielgröße, Zähler als Plakette
   an der rechten oberen Ecke des Symbols (gleiche Farben wie bisher, Weiß auf Navy ab einem Artikel). */
.shop-compact__quick .shop-utility__link { position: relative; justify-content: center; width: 2.75rem; min-width: 2.75rem; padding: 0; gap: 0; }
.shop-compact__quick .shop-basket-count, .shop-compact__quick .shop-rental-count, .shop-compact__quick .shop-cart-count { position: absolute; top: .2rem; right: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; font-size: .6875rem; box-shadow: 0 0 0 2px var(--shop-canvas); }

@media (max-width: 991.98px) {
    /* Im aufgeklappten Bereich liegt das Kategorie-Menü im Textfluss statt als schwebende Liste. */
    .shop-compact__dropdown { position: static !important; flex: 1 0 100%; width: 100%; margin: 0 0 .75rem; box-shadow: none; }
}

/* Telefone: Logo und Knöpfe rücken zusammen, damit Lupe, Konto, drei Körbe und Menü ab 360 px ohne waagerechtes Scrollen passen. */
@media (max-width: 575.98px) {
    .shop-header--compact .shop-brand { padding: .5rem .55rem; }
    .shop-header--compact .shop-brand img, .shop-header--compact .shop-brand-logo { height: 1.35rem; }
    .shop-compact__search-toggle:not([hidden]), .shop-compact__quick .shop-utility__link { width: 2.6rem; min-width: 2.6rem; }
    .shop-compact__toggle { min-width: 2.75rem; padding: .3rem .2rem; font-size: .6875rem; letter-spacing: .02em; }
}
@media (max-width: 374.98px) {
    .shop-compact__search-toggle:not([hidden]), .shop-compact__quick .shop-utility__link { width: 2.25rem; min-width: 2.25rem; }
}

/* Kompakter Kopf: Der Menü-Knopf trägt auch .shop-mobile-toggle, das ab 768 px ausgeblendet wird (großer Kopf).
   Bis 991 px bleibt er sichtbar, sonst wären Navigation, Suche und Symbole zwischen 768 und 991 px nicht erreichbar (P9). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .shop-header--compact .shop-compact__toggle { display: inline-flex !important; }
}

@media (min-width: 992px) {
    .shop-compact__inner { flex-wrap: nowrap; gap: .75rem; padding-top: 0; padding-bottom: 0; }
    .shop-header--compact .shop-brand { flex: 0 0 auto; margin-right: .25rem; }
    .shop-compact__search-toggle:not([hidden]), .shop-compact__quick, .shop-compact__toggle { display: none !important; }
    .shop-compact__panel { display: flex !important; flex: 0 1 auto; align-items: center; min-width: 0; padding: 0; }
    .shop-compact__nav { flex: 0 1 auto; min-width: 0; }
    .shop-compact__list { display: flex; align-items: center; gap: .125rem; }
    .shop-compact__item { flex-wrap: nowrap; border: 0; }
    .shop-compact__link { min-height: 2.75rem; padding: .5rem .45rem; font-size: .75rem; letter-spacing: .06em; white-space: nowrap; }
    .shop-compact__link.is-active { box-shadow: inset 0 -3px 0 var(--shop-navy); }
    .shop-compact__menu-toggle { width: 1.75rem; min-height: 2.75rem; }
    .shop-compact__dropdown { --bs-dropdown-min-width: 18rem; box-shadow: var(--shop-shadow-lg); }
    .shop-compact__dropdown[data-bs-popper] { margin-top: 0; }
    .shop-compact__search, .shop-compact__search.is-collapsed { display: flex; flex: 1 1 8rem; max-width: 16rem; margin-left: auto; padding: 0; }
    .shop-compact__actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; padding: 0; }
    .shop-compact__actions > .shop-utility__link { display: inline-flex; }
    .shop-compact__actions .shop-language { margin-left: .25rem; padding-left: .5rem; border-left: 1px solid var(--shop-line); }
    .shop-header--compact .shop-utility__label { display: none; }
}

@media (min-width: 1200px) {
    .shop-compact__link { padding: .5rem .7rem; font-size: .8125rem; }
    .shop-header--compact .shop-brand-logo { height: 2rem; }
}

/* Standardkopf unter 768 px (E-74, Design-Review Nr. 36): Zeile 1 Logo links, rechts Anfragekorb, Mietliste, Warenkorb und
   Menü-Knopf; Zeile 2 Suchfeld über die volle Breite. Die Gruppe der Utility-Links wird dafür zum Teil des Rasters
   (display: contents); Konto und Sprache stehen mobil im aufgeklappten Menü, der Slot header.utility in einer eigenen Zeile. */
.shop-brand--mobile { display: none; }
@media (max-width: 767.98px) {
    .shop-header--mega .shop-masthead { display: none; }
    .shop-header--mega .shop-utility__inner { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, auto); align-items: center; gap: 0; min-height: 0; padding-top: .5rem; padding-bottom: .65rem; }
    .shop-header--mega .shop-utility__actions { display: contents; }
    .shop-header--mega .shop-brand--mobile { display: inline-flex; grid-row: 1; grid-column: 1; justify-self: start; max-width: 100%; min-height: 2.75rem; padding: .5rem .75rem; }
    .shop-header--mega .shop-brand--mobile .shop-brand-logo { height: 1.6rem; max-width: 100%; object-fit: contain; }
    .shop-header--mega .shop-utility .shop-account-link, .shop-header--mega .shop-utility .shop-language { display: none; }
    .shop-header--mega .shop-utility .shop-utility__link { grid-row: 1; position: relative; justify-content: center; width: 2.75rem; min-width: 2.75rem; padding: 0; gap: 0; }
    .shop-header--mega .shop-utility .shop-basket-count, .shop-header--mega .shop-utility .shop-rental-count, .shop-header--mega .shop-utility .shop-cart-count { position: absolute; top: .2rem; right: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; font-size: .6875rem; box-shadow: 0 0 0 2px var(--shop-canvas); }
    .shop-header--mega .shop-utility .shop-mobile-toggle { grid-row: 1; grid-column: -2; min-width: 3.25rem; min-height: 2.75rem; margin-left: .25rem; padding: .35rem .45rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); }
    .shop-header--mega .shop-mobile-toggle:hover, .shop-header--mega .shop-mobile-toggle[aria-expanded="true"] { background: var(--shop-navy-soft); }
    .shop-header--mega .shop-search { grid-row: 2; grid-column: 1 / -1; max-width: none; margin-top: .5rem; }
    .shop-header--mega .shop-utility__extra { grid-row: 3; grid-column: 1 / -1; padding-top: .5rem; }
    .shop-navigation-mobile .shop-language--menu { margin: .5rem 0 0; padding: 0; border: 0; gap: .25rem; }
    .shop-navigation-mobile .shop-language--menu a { justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .25rem .5rem; border-bottom: 0; color: var(--shop-text-muted); font-weight: 700; letter-spacing: .08em; }
    .shop-navigation-mobile .shop-language--menu a.is-active { color: var(--shop-navy); }
}

/* Slot-Bereiche mit Widget-Platzierungen (nur ausgegeben, wenn der Slot Inhalt liefert) */
.shop-slot--header-after { border-bottom: 1px solid var(--shop-line); background: var(--shop-surface); }
.shop-slot--header-after > .container { padding-top: 1rem; padding-bottom: 1rem; }
.shop-slot > .container > :first-child, .shop-footer__slot > :first-child, .shop-footer__slot-bottom > :first-child, .home-widgets > .container > :first-child, .content-page-slot > :first-child { margin-top: 0; }
.shop-slot > .container > :last-child, .shop-footer__slot > :last-child, .shop-footer__slot-bottom > :last-child, .home-widgets > .container > :last-child { margin-bottom: 0; }
.shop-utility__extra { display: flex; align-items: center; gap: .5rem; font-size: var(--shop-text-xs); }
.shop-footer__slot-bottom { flex: 1 0 100%; }
.content-page-slot { margin-top: 2.5rem; }
.home-widgets { padding: clamp(2rem, 4vw, 3rem) 0; }