/* ACUmed component styles. Class-based so components stay dependency-free.
   Every value resolves to a token in tokens/*.css. Prefix: .acu- */

/* ---------- Button ---------- */
.acu-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--fw-medium);letter-spacing:var(--ls-body);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
.acu-btn--sm{height:36px;padding:0 var(--space-4);font-size:var(--fs-caption)}
.acu-btn--md{height:44px;padding:0 var(--space-6);font-size:var(--fs-body-s)}
.acu-btn--lg{height:52px;padding:0 var(--space-8);font-size:var(--fs-body-m)}
.acu-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.acu-btn--primary:hover{background:var(--action-primary-bg-hover)}
.acu-btn--primary:active{background:var(--action-primary-bg-active)}
.acu-btn--secondary{background:var(--action-secondary-bg);color:var(--text-primary);border-color:var(--action-secondary-border)}
.acu-btn--secondary:hover{border-color:var(--border-strong);background:var(--surface-sunken)}
.acu-btn--accent{background:var(--action-accent-bg);color:var(--ink-900)}
.acu-btn--accent:hover{background:var(--action-accent-bg-hover)}
.acu-btn--ghost{background:transparent;color:var(--text-primary)}
.acu-btn--ghost:hover{background:var(--surface-sunken)}
.acu-btn--inverse{background:var(--paper-050);color:var(--ink-900)}
.acu-btn--inverse:hover{background:var(--paper-200)}
.acu-btn:hover{color:var(--brand-600)}

/* Die beiden Ghost-Varianten nehmen sich von der Regel darueber aus: ihre
   Beschriftung bleibt im Hover stehen, es reagieren nur Flaeche und Kontur.
   Bei den gefuellten Varianten (--primary, --inverse, --accent) ist der
   Farbwechsel dagegen gewollt und bleibt.

   Beide Bloecke muessen NACH `.acu-btn:hover` stehen — gleiche Spezifitaet
   (0,2,0), die Quellreihenfolge entscheidet. Die Wiederholung der Ruhefarbe
   ist ausserdem noetig, weil die Seiten global `a:hover{color:...}` setzen;
   dessen Spezifitaet (0,1,1) wuerde die Variante allein (0,1,0) schlagen. */

/* Auf Fotografie: Beschriftung in Papierweiss, damit sie auf keinem Bild an
   Kontrast verliert. Rueckmeldung sind ein heller Film und eine hellere
   Haarlinie. */
.acu-btn--on-photo{background:transparent;color:var(--paper-050);border-color:rgba(255,255,255,.34)}
.acu-btn--on-photo:hover,.acu-btn--on-photo:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:var(--paper-050)}

/* Auf hellem Grund das Gegenstueck dazu: --secondary verhaelt sich jetzt
   genau wie --on-photo, nur mit Ink-Beschriftung und --surface-sunken als
   Film statt eines weissen. */
.acu-btn--secondary:hover,.acu-btn--secondary:focus-visible{color:var(--text-primary)}
.acu-btn[disabled],.acu-btn--disabled{opacity:.38;pointer-events:none}
.acu-btn--block{width:100%}
.acu-btn__icon{display:inline-flex;width:1em;height:1em;font-size:1.15em}

/* ---------- IconTile ---------- */
.acu-tile{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--ink-900);background:var(--surface-accent);flex:none}
.acu-tile--sm{width:32px;height:32px}
.acu-tile--md{width:40px;height:40px}
.acu-tile--lg{width:56px;height:56px;border-radius:var(--radius-lg)}
.acu-tile--soft{background:var(--surface-accent-soft)}
.acu-tile--ink{background:var(--surface-inverse);color:var(--paper-050)}
.acu-tile--outline{background:transparent;border:1px solid var(--border-default)}

/* ---------- Badge & Tag ---------- */
.acu-badge{display:inline-flex;align-items:center;gap:var(--space-1);height:24px;padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-body)}
.acu-badge--neutral{background:var(--ink-100);color:var(--ink-600)}
.acu-badge--accent{background:var(--brand-300);color:var(--brand-700)}
.acu-badge--success{background:var(--green-100);color:var(--green-600)}
.acu-badge--warning{background:var(--amber-100);color:var(--amber-600)}
.acu-badge--danger{background:var(--red-100);color:var(--red-600)}
.acu-badge--info{background:var(--sky-100);color:var(--sky-700)}
.acu-badge--ink{background:var(--surface-inverse);color:var(--paper-050)}
.acu-badge__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}

.acu-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--fs-body-s);cursor:pointer;transition:var(--transition-ui)}
.acu-tag:hover{border-color:var(--border-strong);color:var(--text-primary)}
.acu-tag--selected{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--paper-050)}
.acu-tag--static{cursor:default}

/* ---------- Fast-Order ---------- */
/* Der Bestellzugang fuer Bestandskunden. Bewusst NICHT wie die uebrigen
   Buttons gestaltet: er traegt die Markenfarbe aus dem Logo und einen
   Pfeil nach aussen. Dadurch ist er auf jeder Seite sofort wiederzu-
   erkennen und tritt nicht in Konkurrenz zum Beratungs-CTA, der
   weiterhin die Hauptaktion bleibt (dunkel bzw. weiss, 44px).
   Mit 36px Hoehe bleibt er im Header eine Stufe darunter.

   Das Pfeil-Icon kommt aus dem CSS und nicht aus dem Markup, weil
   js/mobile-nav.js die Navigationspunkte nur als Text klont — ein
   inline-SVG wuerde dabei verloren gehen, die Maske nicht. */
:root {
  --acu-fastorder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E");
}

.acu-fastorder{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:36px;padding:0 15px;border-radius:var(--radius-full);background:var(--brand-600);color:var(--paper-050);font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:-0.01em;line-height:1;white-space:nowrap;text-decoration:none;transition:background 200ms var(--ease-standard)}
.acu-fastorder::after{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:var(--acu-fastorder-icon) center/contain no-repeat;mask:var(--acu-fastorder-icon) center/contain no-repeat}
/* 0,2,0 — schlaegt das globale a:hover{color:…} (0,1,1) der Seiten,
   genau wie beim Button-Block weiter oben. */
.acu-fastorder:hover,.acu-fastorder:focus-visible{background:var(--brand-700);color:var(--paper-050)}

/* Kompakte Fassung fuer enge Umgebungen wie die Produktkarten: Dort steht
   der Knopf neben einer 16px-Preiszeile, und die schmalste Karte (280px)
   laesst in voller Groesse keine Reserve. Farbe und Pfeil bleiben identisch —
   nur der Massstab passt sich an.

   Hinweis zur Benennung: Der Knopf traegt diese Klasse inzwischen an zwei
   Stellen mit unterschiedlichem Ziel — in Kopfzeile, Fusszeile und Menue
   fuehrt er in den Fast-Order-Shop, in den Produktkarten zum Kontakt-
   formular. Das ist so gewuenscht: eine Optik fuer beide Aktionen. */
.acu-fastorder--sm{height:32px;padding:0 12px;gap:6px;font-size:13px}
.acu-fastorder--sm::after{width:14px;height:14px}

/* Im mobilen Menue behaelt der Punkt die Zeilenhoehe der uebrigen
   Eintraege und bringt nur Farbe und Pfeil mit — gleiche Wiedererkennung,
   ohne den Rhythmus der Liste zu brechen. Die .mnav-Regeln stehen in den
   Seiten selbst (gleiche Spezifitaet, spaetere Quelle), deshalb hier
   bewusst 0,2,0 statt 0,1,0. */
.mnav__link.acu-fastorder{height:auto;min-height:52px;padding:0 16px;border-radius:var(--radius-md);font-size:17px;justify-content:flex-start;background:var(--brand-600);color:var(--paper-050)}
.mnav__link.acu-fastorder::after{margin-left:auto}
/* 0,3,0 — .mnav__link:hover der Seiten ist 0,2,0 und steht spaeter im
   Dokument; ohne diese Stufe wuerde der Punkt im Hover seine Farbe
   verlieren. */
.mnav__link.acu-fastorder:hover,.mnav__link.acu-fastorder:focus-visible{background:var(--brand-700);color:var(--paper-050)}

/* ---------- Wordmark ---------- */
/* ---------- Logo ---------- */
/* Bildlogo des Kunden, Ersatz fuer die typografische Wortmarke darunter.
   Es gibt zwei Fassungen, weil die Farbdatei keinen Alphakanal hat (deckend
   weisser Grund) und die Weissfassung auf hellem Grund unsichtbar waere:
     __light  weiss, transparent  -> dunkler Grund (Footer, Header ueber Foto)
     __dark   farbig, weisser Grund -> heller Grund (Header im soliden Zustand)
   Sichtbar ist immer genau eine. Im Header schaltet [data-header].is-solid um,
   dieselbe Schwelle, an der auch Schrift- und Hintergrundfarbe wechseln.
   Traegt ein .acu-logo nur ein Bild ohne Variantenklasse, wird dieses immer
   gezeigt (Seiten, deren Header durchgehend hell ist).
   line-height:0 verhindert, dass die Zeilenbox hoeher wird als das Bild. */
.acu-logo{display:inline-flex;align-items:center;flex:none;line-height:0;text-decoration:none}
.acu-logo img{display:block;width:auto}
.acu-logo img.acu-logo__dark{display:none}
[data-header].is-solid .acu-logo img.acu-logo__light{display:none}
[data-header].is-solid .acu-logo img.acu-logo__dark{display:block}

.acu-wordmark{display:inline-flex;align-items:baseline;gap:.06em;font-family:var(--font-display);letter-spacing:-0.03em;line-height:1;color:var(--text-primary);text-decoration:none}
.acu-wordmark--inverse{color:var(--paper-050)}
.acu-wordmark__a{font-weight:var(--fw-semibold)}
.acu-wordmark__b{font-weight:var(--fw-light)}
.acu-wordmark__rule{display:inline-block;width:.34em;height:.09em;background:var(--brand-600);margin-left:.18em;transform:translateY(-.28em)}

/* ---------- Form fields ---------- */
.acu-field{display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-sans)}
.acu-field__label{font-size:var(--fs-body-s);font-weight:var(--fw-medium);color:var(--text-primary)}
.acu-field__hint{font-size:var(--fs-caption);color:var(--text-tertiary)}
.acu-field__error{font-size:var(--fs-caption);color:var(--text-danger)}
.acu-input{width:100%;height:48px;padding:0 var(--space-4);font-family:var(--font-sans);font-size:var(--fs-body-m);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:var(--transition-ui)}
.acu-input::placeholder{color:var(--text-tertiary)}
.acu-input:hover{border-color:var(--border-strong)}
.acu-input:focus{outline:none;border-color:var(--ink-800);box-shadow:var(--shadow-focus)}
.acu-input--invalid{border-color:var(--red-600)}
.acu-input[disabled]{background:var(--surface-sunken);color:var(--text-tertiary);cursor:not-allowed}
.acu-textarea{height:auto;min-height:120px;padding:var(--space-3) var(--space-4);line-height:var(--lh-body-m);resize:vertical}
.acu-select-wrap{position:relative;display:block}
.acu-select{appearance:none;padding-right:var(--space-10);cursor:pointer}
.acu-select-wrap::after{content:"";position:absolute;right:var(--space-4);top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink-500);border-bottom:1.5px solid var(--ink-500);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.acu-check{display:flex;align-items:flex-start;gap:var(--space-3);font-family:var(--font-sans);font-size:var(--fs-body-s);color:var(--text-secondary);cursor:pointer}
.acu-check input{appearance:none;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);cursor:pointer;transition:var(--transition-ui)}
.acu-check input:checked{background:var(--ink-800);border-color:var(--ink-800)}
.acu-check input:checked::after{content:"";display:block;width:5px;height:9px;margin:3px auto;border-right:2px solid var(--paper-050);border-bottom:2px solid var(--paper-050);transform:rotate(42deg)}
.acu-check input:focus-visible{box-shadow:var(--shadow-focus);outline:none}
.acu-check--radio input,.acu-check--radio input:checked::after{border-radius:var(--radius-full)}
.acu-check--radio input:checked::after{width:8px;height:8px;margin:5px auto;border:none;background:var(--paper-050);transform:none}
.acu-search{position:relative;display:flex;align-items:center}
.acu-search .acu-input{padding-left:var(--space-12)}
.acu-search__icon{position:absolute;left:var(--space-4);display:flex;color:var(--text-tertiary);pointer-events:none}
.acu-search__btn{position:absolute;right:6px}

/* ---------- Content blocks ---------- */
.acu-label{display:block;font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-tertiary);max-width:26ch}
.acu-label--upper{text-transform:uppercase;letter-spacing:var(--ls-label);font-size:var(--fs-label);font-weight:var(--fw-medium)}

.acu-feature{display:flex;flex-direction:column;gap:var(--space-3);max-width:34ch}
.acu-feature__title{font-family:var(--font-sans);font-size:var(--fs-body-m);font-weight:var(--fw-medium);color:var(--text-primary)}
.acu-feature__body{font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--text-secondary)}

.acu-stat{display:flex;flex-direction:column;gap:var(--space-2)}
.acu-stat__value{font-family:var(--font-display);font-size:var(--fs-display-m);font-weight:var(--fw-light);letter-spacing:var(--ls-display);line-height:1;color:var(--text-primary)}
.acu-stat__label{font-size:var(--fs-body-s);color:var(--text-secondary)}
.acu-stat--inverse .acu-stat__value{color:var(--paper-050)}
.acu-stat--inverse .acu-stat__label{color:var(--text-inverse-muted)}

.acu-media{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken);display:block}
.acu-media__img{width:100%;height:100%;object-fit:cover;transition:var(--transition-media)}
.acu-media--hover:hover .acu-media__img{transform:scale(1.03)}
.acu-media__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none}
.acu-media__slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);background:var(--surface-sunken);color:var(--text-tertiary);font-size:var(--fs-caption);text-align:center;padding:var(--space-4)}
.acu-media__slot span{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.acu-media__caption{position:absolute;left:var(--space-6);right:var(--space-6);bottom:var(--space-6);color:var(--paper-050);font-size:var(--fs-body-s)}

.acu-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.acu-card--flat{border-color:transparent;background:transparent}
.acu-card--sunken{background:var(--surface-sunken);border-color:transparent}
.acu-card--inverse{background:var(--surface-inverse);border-color:transparent;color:var(--text-inverse)}
.acu-card--interactive{cursor:pointer}
.acu-card--interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.acu-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6)}
.acu-card__title{font-size:var(--fs-heading-s);font-weight:var(--fw-medium);letter-spacing:var(--ls-heading)}
.acu-card__text{font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--text-secondary)}

.acu-product{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.acu-product:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.acu-product__media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken)}
.acu-product__badge{position:absolute;top:var(--space-3);left:var(--space-3)}
.acu-product__body{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-2) var(--space-2)}
.acu-product__sku{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary)}
.acu-product__name{font-size:var(--fs-body-m);font-weight:var(--fw-medium);line-height:1.35}
.acu-product__meta{font-size:var(--fs-caption);color:var(--text-secondary)}
.acu-product__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2)}
.acu-product__price{font-size:var(--fs-body-m);font-weight:var(--fw-medium)}
.acu-product__price small{display:block;font-size:var(--fs-label);font-weight:var(--fw-regular);color:var(--text-tertiary)}

/* ---------- Product link interaction ---------- */
.product-card__link{transition:color var(--dur-fast) var(--ease-standard)}
.product-card__link>span{display:inline-block;transition:transform var(--dur-fast) var(--ease-standard)}
.product-card__link:hover,.product-card__link:focus-visible{color:var(--brand-700)!important}
.product-card__link:hover>span,.product-card__link:focus-visible>span{transform:translateX(4px)}

/* ---------- Navigation ---------- */
/* Die Unterstreichung gilt fuer die Textpunkte der Hauptnavigation.
   Der Fast-Order-Knopf ist bewusst ausgenommen (:not): Er ist eine
   Flaeche, keine Textzeile — die Regeln hier wuerden sonst sein
   Pfeil-::after zur 2px-Linie machen und seine Schriftfarbe im Hover
   per !important ueberschreiben. */
[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder){position:relative;transition:color var(--dur-fast) var(--ease-standard)}
[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:999px;background:var(--brand-600);transform:scaleX(0);transform-origin:right center;transition:transform var(--dur-fast) var(--ease-standard)}
[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder):hover,[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder):focus-visible,[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder)[aria-current="page"]{color:var(--hdr-fg)!important}
[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder):hover::after,[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder):focus-visible::after,[data-header] nav[aria-label="Hauptnavigation"]>a:not(.acu-fastorder)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center}

.acu-navlink{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-sans);font-size:var(--fs-body-s);color:var(--text-secondary);text-decoration:none;padding:var(--space-2) 0;transition:var(--transition-ui);background:none;border:none;cursor:pointer}
.acu-navlink:hover{color:var(--text-primary)}
.acu-navlink--active{color:var(--text-primary);font-weight:var(--fw-medium)}
.acu-navlink--inverse{color:var(--text-inverse-muted)}
.acu-navlink--inverse:hover,.acu-navlink--inverse.acu-navlink--active{color:var(--paper-050)}
.acu-navlink__caret{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg)}

.acu-crumbs{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-caption);color:var(--text-tertiary);font-family:var(--font-sans)}
.acu-crumbs a{color:var(--text-tertiary);text-decoration:none}
.acu-crumbs a:hover{color:var(--text-primary)}
.acu-crumbs__sep{opacity:.5}
.acu-crumbs__current{color:var(--text-primary)}

.acu-pager{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans)}
.acu-pager__item{min-width:40px;height:40px;padding:0 var(--space-2);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-secondary);font-size:var(--fs-body-s);cursor:pointer;transition:var(--transition-ui)}
.acu-pager__item:hover{border-color:var(--border-strong);color:var(--text-primary)}
.acu-pager__item--active{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--paper-050)}
.acu-pager__item[disabled]{opacity:.35;pointer-events:none}
.acu-pager__gap{color:var(--text-tertiary);padding:0 var(--space-1)}