/** Shopify CDN: Minification failed

Line 2096:73 Unexpected "*"

**/
/* ============================================================
   aw_lp_port.css — Redesign-SECTIONS fuers LIVE-Theme, .awx-gescopet
   GENERIERT via tools/build_kit_port.py aus frontend_redesign main
   (assets/aw_sections.css) — NICHT von Hand editieren.
   Setzt aw_kit_port.css voraus (Tokens/Atome) und wird NACH ihm geladen.
   Nur auf Seiten laden, die Redesign-Sections rendern (Ads-LPs).
   ============================================================ */
/* === PORT aus Design-Export sections.css (Redesign_Fable_export_2026-07-05) ===
   rem-Werte deterministisch x1.6 konvertiert (Dawn html font-size 62.5%, 1rem=10px;
   Design-Skala war 1rem=16px). Fallback-Fonts auf AuthorFallback/CompadreFallback normalisiert.
   NICHT manuell zurueckkonvertieren. Quelle siehe _blueprint/09_bau_entscheidungen.md E1/E2. */
/* ==========================================================================
   alpen-werk — THEME-SECTIONS (EIN globales CSS für alle Seiten)
   ==========================================================================
   Shopify-Mapping: relaunch-notes/SECTIONS.md  ·  Bibliothek: widgets.html
   Laden pro Seite (feste Reihenfolge, kein Seiten-CSS daneben):
     <link rel="stylesheet" href="assets/tokens.css">     ← Theme-Settings
     <link rel="stylesheet" href="assets/kit.css">        ← Primitives (base.css)
     <link rel="stylesheet" href="assets/sections.css">   ← DIESE Datei (alle Sections)
     <link rel="stylesheet" href="assets/aw-chrome.css">  ← Header/Footer (Section-Groups)
   Jede Section = Banner-Kommentar-Block → wird beim Theme-Build 1:1 eine
   section-<name>.css + <name>.liquid. KEINE Styles mehr in Seiten-<style>-Blöcken.
   ========================================================================== */

/* v18.07d Kontrast (Stephan 18.07.2026): ALLE font-weight 300 in dieser Datei (Fliesstext:
   p / __desc / __body / .lead / li / dd / small / Tabellen) global auf 400 gehoben — 300
   war auf den muted-Mischtoenen zu duenn (schlecht lesbar, v. a. mobil / Zielgruppe 50+).
   Ueberschriften/Eyebrows/Zitate sind serifig 400 und bleiben unberuehrt. Zusammen mit den
   kraeftigeren --fg-muted/--fg-subtle (aw_tokens.css) und den Versprechen-Boxen (.promise /
   .ql-card auf volles --fg) ist das der Kontrast-Generalfix. */

/* ===================== SHELL (Layout-Grundrauschen, dark) ===================== */
.awx.aw, .awx.b { overflow-x: clip; } /* v19.07d: clip statt hidden -> position:sticky (Header) funktioniert, Horizontal-Scroll trotzdem verhindert */
.awx.b { background: var(--felsgestein); color: var(--alpenlicht); }
.awx .b h1, .awx .b h2, .awx .b h3 { font-weight: 400; }
/* Kapitel-Rhythmus: Marketing-Seiten großzügig; unter dem Konfigurator dicht (--dense/.below-b) */
.awx .b-sec { padding-block: clamp(56px, 9vw, 120px); position: relative; }
/* v4.73 Mix (Stephan 13.07.): Live-3D-Spotlight bleibt eine DUNKLE Buehne, auch wenn der
   Shop hell ist. data-theme="dark" auf der Section flippt die Basistoken zurueck
   (felsgestein=dunkel) — die Section malt darum ihren eigenen dunklen Grund + hellen Text,
   waehrend Hero (lp-hero) dasselbe Muster nutzt. So glueht das farbige Relief wie im Galerie-Spot. */
.awx .b-sec--stage { background: var(--felsgestein); color: var(--alpenlicht); }
.awx .b-sec--stage h1, .awx .b-sec--stage h2, .awx .b-sec--stage h3 { color: var(--alpenlicht); }
.awx .b-shead .eyebrow, .awx .lp-hero .eyebrow, .awx .cmp-copy .eyebrow, .awx .evt-hero .eyebrow { color: var(--accent-text); }
.awx .b-sec--bot { border-bottom: 1px solid var(--border-mid); }

/* ==========================================================================
   alpen-werk — REUSABLE SECTION POOL (B Dark-Cinematic)
   One library of premium, CRO-tuned sections shared across all B pages
   (PDP, Home, Berg-LP, B2B, Team …). Maps cleanly to Shopify sections.
   Depends on assets/tokens.css. All dark-on-felsgestein by default.
   ========================================================================== */

/* ---------- shell + rhythm (Legacy-Alias: .aw/.aw-wrap nur noch für Altbestände; Kanon = body.b + .wrap) ---------- */
.awx .aw { background: var(--felsgestein); color: var(--alpenlicht); }
.awx .aw-wrap { max-width: var(--content-max); margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); position: relative; z-index: 1; }
.awx .aw-wrap--narrow { max-width: var(--content-narrow); }

/* ---------- buttons (B) ---------- */
.awx .aw-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); text-decoration: none; font-weight: 500; font-size: var(--fs-15); transition: gap var(--dur-base) var(--ease-out); }
.awx .aw-link:hover { gap: 13px; }

/* ---------- bullets / "Was Du bekommst" grid ---------- */
/* v18.07f: dunkle Buehnen-Insel — ganze Section auf geflipptes --bg (Felsgestein). */
.awx .b-sec[data-theme="dark"] { background: var(--bg); }
/* v18.07f (Stephan: "Key-USPs muessen knallen"): Zellen -> echte Karten mit Gewicht:
   Bergsonne-Icon-Chip 44px, Titel fetter+voller Ton, Text var(--fg) statt 65%-Blass-Mix,
   fs-15. Traegt data-theme=dark-Insel ("Dunkle Buehne", Section-Setting stil). */
.awx .aw-bullets { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .aw-bullet { padding: 28px; border-right: 1px solid var(--border-mid); display: flex; flex-direction: column; gap: 12px; }
.awx .aw-bullet:last-child { border-right: 0; }
.awx .aw-bullet .b-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; flex: none; }
.awx .aw-bullet svg { width: 22px; height: 22px; color: var(--accent-text); }
.awx .aw-bullet h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-22); color: var(--fg); }
.awx .aw-bullet p { color: var(--fg); font-size: var(--fs-15); font-weight: 400; margin: 0; line-height: 1.6; }
@media (max-width: 860px) { .awx .aw-bullets { grid-template-columns: 1fr 1fr; } .awx .aw-bullet:nth-child(2) { border-right: 0; } .awx .aw-bullet:nth-child(1), .awx .aw-bullet:nth-child(2) { border-bottom: 1px solid var(--border-mid); } }
@media (max-width: 540px) { .awx .aw-bullets { grid-template-columns: 1fr; } .awx .aw-bullet { border-right: 0; border-bottom: 1px solid var(--border-mid); } .awx .aw-bullet:last-child { border-bottom: 0; } }

/* ---------- UGC gallery (reliefs in real homes) ---------- */
.awx .aw-ugc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.awx .aw-ugc__item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/3.6; background: var(--bg-muted); }
.awx .aw-ugc__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.awx .aw-ugc__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.awx .aw-ugc__item:hover img { transform: scale(1.04); }
.awx .aw-ugc__tag { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.5); backdrop-filter: blur(4px); padding: 5px 10px; border-radius: var(--radius-pill); }
@media (max-width: 860px) { .awx .aw-ugc { grid-template-columns: 1fr 1fr; } .awx .aw-ugc__item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; } }

/* ---------- upsell band (engraving) ---------- */
.awx .aw-upsell { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; border: 1px solid var(--bergsonne); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in oklch, var(--bergsonne) 8%, var(--felsgestein)); }
.awx .aw-upsell__media { position: relative; aspect-ratio: 16/11; overflow: hidden; height: 100%; }
.awx .aw-upsell__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .aw-upsell__body { padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0; }
.awx .aw-upsell__body .aw-eyebrow { color: var(--accent-text); }
.awx .aw-upsell__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.56rem, 3vw, 3.84rem); margin: 12px 0 12px; letter-spacing: -.01em; }
.awx .aw-upsell__body p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; margin: 0 0 20px; }
@media (max-width: 860px) { .awx .aw-upsell { grid-template-columns: 1fr; } .awx .aw-upsell__body { padding: clamp(20px,5vw,32px); } }

/* ---------- video testimonial ---------- */
.awx .aw-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/8.5; }
.awx .aw-video img { width: 100%; height: 100%; object-fit: cover; }
.awx .aw-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(30,30,28,.7)); }
.awx .aw-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--alpenlicht) 92%, transparent); display: grid; place-items: center; z-index: 2; cursor: pointer; border: 0; transition: transform var(--dur-base) var(--ease-out); }
.awx .aw-video__play:hover { transform: translate(-50%,-50%) scale(1.06); }
.awx .aw-video__play svg { width: 26px; height: 26px; color: var(--felsgestein); margin-left: 3px; }
.awx .aw-video__quote { position: absolute; left: clamp(20px,4vw,40px); bottom: clamp(20px,4vw,36px); right: clamp(20px,4vw,40px); z-index: 2; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.76rem, 2.2vw, 2.56rem); color: var(--alpenlicht); max-width: 34ch; }
.awx .aw-video__who { display: block; font-family: var(--font-mono); font-style: normal; font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); margin-top: 10px; letter-spacing: .04em; }

/* ---------- berg facts ledger (page-specific module, reusable per peak) ---------- */
.awx .aw-facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; }
.awx .aw-fact { padding: 26px; border-right: 1px solid var(--border-mid); }
.awx .aw-fact:last-child { border-right: 0; }
.awx .aw-fact dt { font-family: var(--font-sans); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: color-mix(in oklch, var(--alpenlicht) 52%, var(--felsgestein)); margin-bottom: 8px; }
.awx .aw-fact dd { margin: 0; font-family: var(--font-serif); font-size: clamp(2.24rem,2.4vw,3.2rem); font-variant-numeric: tabular-nums; }
.awx .aw-fact dd small { font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); font-family: var(--font-sans); }
@media (max-width: 860px) { .awx .aw-facts { grid-template-columns: 1fr 1fr; } .awx .aw-fact:nth-child(2) { border-right: 0; } .awx .aw-fact:nth-child(1), .awx .aw-fact:nth-child(2) { border-bottom: 1px solid var(--border-mid); } }
@media (max-width: 480px) { .awx .aw-facts { grid-template-columns: 1fr; } .awx .aw-fact { border-right: 0; border-bottom: 1px solid var(--border-mid); } .awx .aw-fact:last-child { border-bottom: 0; } }

/* ---------- elevation profile ---------- */
.awx .aw-elev { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: clamp(20px,3vw,36px); overflow: hidden; }
.awx .aw-elev svg { width: 100%; height: auto; display: block; }
.awx .aw-elev .grid-line { stroke: var(--border-mid); stroke-width: 1; }
.awx .aw-elev .profile { fill: none; stroke: var(--bergsonne); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.awx .aw-elev .profile-fill { fill: color-mix(in oklch, var(--bergsonne) 12%, transparent); stroke: none; }
.awx .aw-elev .peak-dot { fill: var(--bergsonne); }
.awx .aw-elev .lbl { font-family: var(--font-mono); font-size: 11px; fill: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); }
.awx .aw-elev .peak-lbl { font-family: var(--font-serif); font-size: 15px; fill: var(--alpenlicht); }

/* ---------- peak cross-links ---------- */
.awx .aw-peaks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.awx .aw-peak { position: relative; aspect-ratio: 3/4; border: 1px solid var(--border-mid); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; padding: 14px; text-decoration: none; color: var(--alpenlicht); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .aw-peak:hover { border-color: var(--border-mid-strong); transform: translateY(-3px); }
.awx .aw-peak .aw-peak__topo, .awx .aw-peak span.aw-peak__topo { position: absolute; inset: 0; z-index: 0; color: var(--alpenlicht); opacity: .14; }
.awx .aw-peak__topo svg { width: 100%; height: 100%; }
.awx .aw-peak span { position: relative; z-index: 1; font-family: var(--font-serif); font-size: var(--fs-18); }
.awx .aw-peak small { position: absolute; top: 12px; left: 14px; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-11); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); }
@media (max-width: 860px) { .awx .aw-peaks { grid-template-columns: repeat(2, 1fr); } }

/* ---------- prose / SEO ---------- */
.awx .aw-prose { max-width: 68ch; color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); font-weight: 400; line-height: 1.7; }
.awx .aw-prose h2 { color: var(--alpenlicht); margin-bottom: 16px; }
.awx .aw-prose p { margin: 0 0 16px; }

/* ---------- logo marquee (reusable: Bekannt-aus, Partner — 1 oder 2 Reihen gegenläufig) ----------
   Markup: .aw-marquee > .aw-mqrow.aw-mqrow--l (oder --r) > .aw-logo × (Set 4× wiederholt für nahtlosen -25%-Loop) */
.awx .aw-marquee { max-width: 1000px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.awx .aw-marquee + .aw-marquee { margin-top: 16px; }
.awx .aw-mqrow { display: flex; gap: 16px; width: max-content; padding: 4px 0; }
.awx .aw-mqrow--l { animation: aw-mq-l 32s linear infinite; }
.awx .aw-mqrow--r { animation: aw-mq-r 38s linear infinite; }
.awx .aw-marquee:hover .aw-mqrow { animation-play-state: paused; }
@keyframes aw-mq-l { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes aw-mq-r { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .awx .aw-mqrow { animation: none !important; } }
/* v4.73 Mix (Stephan 13.07. „SWITCH"): Logo-Chips STABIL weiss (--sw-weiss flippt NICHT
   mit dem Farbwelt-Switch) — sonst kippt var(--alpenlicht) im Hell-Modus auf dunkel und der
   Presse-Slider wird ein dunkler Streifen auf heller Seite. Dunkle Logos bleiben so in
   beiden Welten sichtbar; Hairline gibt dem Chip auf hellem Grund Kontur. */
.awx .aw-logo { flex: none; height: 84px; min-width: 150px; display: grid; place-items: center; padding: 0 24px; background: var(--sw-weiss); border: 1px solid var(--border); border-radius: var(--radius-md); }
.awx .aw-logo img { max-height: 40px; max-width: 116px; width: auto; }
.awx .aw-logo img.sm { max-height: 26px; }
.awx .aw-logo img.lg { max-height: 56px; max-width: 134px; }
/* Mobil: kompaktere Logo-Kacheln, Logos proportional größer & lesbar */
@media (max-width: 640px) {
  .awx .aw-logo { height: 64px; min-width: 128px; padding: 0 18px; }
  .awx .aw-logo img { max-width: 126px; max-height: 32px; }
  .awx .aw-logo img.lg { max-height: 44px; }
}

/* ---------- card grid (reusable: benefits/values, beliebige Anzahl) ---------- */
.awx .aw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .awx .aw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .awx .aw-cards { grid-template-columns: 1fr; } }
.awx .aw-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .awx .aw-cards--2 { grid-template-columns: 1fr; } }
.awx .aw-card { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 30px 26px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .aw-card:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .aw-card__i { width: 50px; height: 50px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; margin-bottom: 18px; }
.awx .aw-card__i svg { width: 24px; height: 24px; color: var(--accent-text); }
.awx .aw-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); margin: 0 0 10px; }
.awx .aw-card p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); line-height: 1.55; margin: 0; }

/* ---------- berg story (narrative, two-column on desktop) ---------- */
.awx .aw-bstory { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.awx .aw-bstory__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; }
.awx .aw-bstory__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .aw-bstory__body h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.72rem,3.4vw,4rem); letter-spacing: -.02em; margin: 14px 0 20px; line-height: 1.1; }
.awx .aw-bstory__body p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; line-height: 1.7; margin: 0 0 18px; max-width: 52ch; }
.awx .aw-bstory__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .awx .aw-bstory { grid-template-columns: 1fr; } .awx .aw-bstory__media { aspect-ratio: 16/10; } }

/* ---------- topo depth helper (parallax background) ---------- */
.awx .aw-depth { position: absolute; inset: -10% 0; z-index: 0; pointer-events: none; color: var(--alpenlicht); opacity: .05; }
.awx .aw-depth svg { width: 100%; height: 100%; }

/* ---------- reveal-on-scroll (shared) ---------- */
.awx .aw-reveal-ready [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); will-change: opacity, transform; }
.awx .aw-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
.awx .aw-reveal-ready [data-reveal].no-anim { transition: none !important; }
.awx [data-reveal][data-reveal-delay="1"] { transition-delay: 70ms; }
.awx [data-reveal][data-reveal-delay="2"] { transition-delay: 140ms; }
.awx [data-reveal][data-reveal-delay="3"] { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) { .awx .aw-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } .awx .aw-depth { transform: none !important; } }


/* ---------- sticky mobile CTA (Berg-LP / PDP) ---------- */
/* Sticky-CTA: EINE Komponente (.lp-sticky, Modifier --fix für PDPs/Berg-LPs); body-Padding via body.has-sticky (JS). */
.awx .aw-cta-note { display:block; margin-top:14px; font-size:var(--fs-13); color:color-mix(in oklch,var(--alpenlicht) 64%,var(--felsgestein)); font-family:var(--font-sans); }
.awx .aw-fineprint { font-size:var(--fs-13); color:color-mix(in oklch,var(--alpenlicht) 66%,var(--felsgestein)); font-weight: 400; margin:14px 0 0; }
.awx .aw-fact dd.is-text { font-size:var(--fs-20); }

/* (Basis: ehem. aw-sections.css ↑) */

/* (Basis: ehem. aw-widgets.css — Landingpage-/Uni-Konfigurator-Look) */

/* ==========================================================================
   alpen-werk — Uni-Konfigurator: PDP unterhalb der Stage im Landingpage-Look
   Dunkle Kapitel auf Felsgestein — Design übernommen aus landingpage.html,
   adaptiert: 4 Linien-Karten (Classic · Natural · Track · Natural + Track),
   Karten wählen die Linie direkt im Konfigurator oben (data-choose-line).
   ========================================================================== */

.awx .aw-widgets {
  position: relative;
  background: var(--felsgestein); color: var(--alpenlicht);
  overflow-x: clip;
}
.awx .aw-widgets h2, .awx .aw-widgets h3 { font-family: var(--font-serif); font-weight: 400; }
.awx .aw-widgets .eyebrow { color: var(--accent-text); }

/* ---------- Kapitel-System (1:1 Landingpage) ---------- */
.awx .b-sec--dense, .awx .below-b .b-sec { padding-block: clamp(36px, 4vw, 56px); }
.awx .b-sec--top { border-top: 1px solid var(--border-mid); }
.awx .b-sec--panel { background: color-mix(in srgb, var(--alpenlicht) 5.5%, var(--felsgestein)); }
.awx .b-shead { max-width: min(94%, 89.6rem); margin-bottom: clamp(28px, 4vw, 52px); }
.awx .b-shead h2 { font-size: var(--fs-h2-display); letter-spacing: -.025em; margin-top: 16px; text-wrap: balance; }
.awx .b-shead p { color: var(--fg-muted); font-weight: 400; margin-top: 18px; font-size: var(--fs-18); max-width: 52ch; }
.awx .b-shead--center { margin-inline: auto; text-align: center; }
.awx .b-shead--center p { margin-inline: auto; }

/* ---------- Trust-Stats ---------- */
.awx .b-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--border-mid); }
.awx .b-stat { padding: clamp(28px,4vw,44px) clamp(20px,3vw,40px); text-align: center; border-right: 1px solid var(--border-mid); min-width: 0; }
.awx .b-stat:last-child { border-right: 0; }
.awx .b-stat__n { font-family: var(--font-serif); font-weight: 400; font-size: clamp(4.4rem, 4.5vw, 5.2rem); line-height: 1; color: var(--alpenlicht); font-variant-numeric: tabular-nums; }
.awx .b-stat__n .star { color: var(--aw-star); } /* v19.07: Sterne IMMER Amazon-Gold (Stephan) */
.awx .b-stat__l { margin-top: 12px; font-size: var(--fs-13); color: var(--fg-muted); font-weight: 400; }
@media (max-width: 860px) {
  .awx .b-stat { padding: 22px 10px; }
  .awx .b-stat__n { font-size: 2.56rem; }
  .awx .b-stat__l { margin-top: 7px; font-size: var(--fs-11); line-height: 1.3; text-wrap: balance; }
}

/* ---------- Linien-Karten (4-up) ---------- */
.awx #below-lines { padding-top: clamp(40px, 6vw, 72px); }
.awx #below-lines .b-shead { margin-bottom: clamp(24px, 3vw, 40px); }
.awx .lp-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.awx .lp-lines--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) and (min-width: 861px) { .awx .lp-lines--4 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 860px) {
  .awx .lp-lines { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 4px 10px; cursor: grab; }
  .awx .lp-lines::-webkit-scrollbar { display: none; }
  .awx .lp-card { flex: 0 0 78%; scroll-snap-align: center; }
}
.awx .lp-card { display: flex; flex-direction: column; text-decoration: none; color: var(--alpenlicht); border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); position: relative; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out); }
.awx .lp-card:hover { border-color: var(--bergsonne); }
.awx .lp-card:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }
.awx .lp-card__media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.awx .lp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.awx .lp-card:hover .lp-card__media img { transform: scale(1.03); }
.awx .lp-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--aw-on-accent); background: var(--bergsonne); padding: 5px 11px; border-radius: var(--radius-pill); }
.awx .lp-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.awx .lp-card__name { font-family: var(--font-serif); font-size: clamp(2.32rem, 1.8vw, 2.88rem); letter-spacing: -.02em; line-height: 1.05; }
.awx .lp-card__desc { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-14); line-height: 1.55; }
.awx .lp-card__ideal { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); display: flex; gap: 8px; align-items: baseline; }
.awx .lp-card__ideal b { color: var(--accent-text); font-weight: 500; font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap; }
.awx .lp-card__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border-mid); }
.awx .lp-card__price { font-family: var(--font-serif); font-size: 2.08rem; color: var(--alpenlicht); font-variant-numeric: tabular-nums; }
.awx .lp-card__price small { font-family: var(--font-sans); font-size: var(--fs-12); color: var(--fg-muted); font-weight: 400; }
.awx .lp-card__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 500; color: var(--alpenlicht); padding: 7px 11px; border: 1px solid var(--border-mid); border-radius: var(--radius-md); transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base); }
.awx .lp-card:hover .lp-card__go { background: var(--bergsonne); border-color: transparent; color: var(--aw-on-accent); font-weight: 600; }

/* Wisch-Punkte — nur mobil */
.awx .lp-dots { display: none; }
@media (max-width: 860px) {
  .awx .lp-dots { display: flex; justify-content: center; gap: 2px; margin-top: 12px; flex-wrap: wrap; }
  .awx .lp-dots button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 8px 8px; font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); cursor: pointer; }
  .awx .lp-dots button .d { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--border-mid); transition: background var(--dur-base), width var(--dur-base); }
  .awx .lp-dots button.is-act { color: var(--alpenlicht); }
  .awx .lp-dots button.is-act .d { background: var(--bergsonne); width: 16px; }
}
.awx .lp-microtrust { margin-top: clamp(24px,3vw,36px); text-align: center; font-size: var(--fs-13); color: var(--fg-muted); font-weight: 400; }
.awx .lp-microtrust .sep { color: var(--fg-faint); margin: 0 10px; }

/* ---------- 3-Schritte + USP-Kacheln ---------- */
.awx .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; }
@media (max-width: 860px) { .awx .lp-steps { grid-template-columns: 1fr; } }
.awx .lp-step { padding: clamp(28px,3vw,42px); position: relative; border-right: 1px solid var(--border-mid); overflow: hidden; background: transparent; }
.awx .lp-step:last-child { border-right: 0; }
@media (max-width: 860px) { .awx .lp-step { border-right: 0; border-bottom: 1px solid var(--border-mid); } .awx .lp-step:last-child { border-bottom: 0; } }
.awx .lp-step__ico { display: inline-flex; color: var(--accent-text); }
.awx .lp-step__ico svg { width: 30px; height: 30px; }
.awx .lp-step__idx { position: absolute; top: clamp(18px,2.4vw,28px); right: clamp(22px,2.6vw,32px); font-family: var(--font-serif); font-size: clamp(4.16rem,4.4vw,5.76rem); line-height: 1; color: color-mix(in oklch, var(--alpenlicht) 13%, transparent); font-variant-numeric: tabular-nums; pointer-events: none; }
.awx .lp-step h3 { font-family: var(--font-serif); font-size: var(--fs-24); font-weight: 400; margin: 22px 0 8px; }
.awx .lp-step p { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-15); margin: 0; }

.awx .lp-steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) and (min-width: 861px) {
  .awx .lp-steps--4 { grid-template-columns: 1fr 1fr; }
  .awx .lp-steps--4 .lp-step:nth-child(2n) { border-right: 0; }
  .awx .lp-steps--4 .lp-step:nth-child(-n+2) { border-bottom: 1px solid var(--border-mid); }
}

/* ---------- Vorschau ↔ Modell (Before/After) ---------- */
.awx .cmp-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .awx .cmp-grid { grid-template-columns: 1fr; gap: 28px; } }
.awx .cmp-copy h2 { font-size: var(--fs-h2-split); letter-spacing: -.025em; margin-top: 16px; }
.awx .cmp-copy p { color: var(--fg-muted); font-weight: 400; margin-top: 18px; font-size: var(--fs-18); max-width: 40ch; }
.awx .cmp-copy .cmp-hint { margin-top: 22px; font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 66%, var(--felsgestein)); display: inline-flex; align-items: center; gap: 9px; }
.awx .cmp-copy .cmp-hint svg { width: 17px; height: 17px; color: var(--accent-text); }
.awx .cmp { --pos: 50%; position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1/1; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-mid); box-shadow: var(--shadow-dark-xl); user-select: none; touch-action: pan-y; cursor: ew-resize; background: var(--felsgestein); }
.awx .cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; display: block; }
.awx .cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); will-change: clip-path; }
.awx .cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--alpenlicht); transform: translateX(-1px); pointer-events: none; z-index: 3; }
.awx .cmp__knob { position: absolute; top: 50%; left: var(--pos); width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--alpenlicht); color: var(--felsgestein); display: grid; place-items: center; box-shadow: var(--shadow-md); z-index: 4; cursor: ew-resize; }
.awx .cmp__knob:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }
.awx .cmp__knob svg { width: 22px; height: 22px; }
.awx .cmp__tag { position: absolute; bottom: 14px; z-index: 3; font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 500; color: var(--alpenlicht); background: color-mix(in oklch, var(--felsgestein) 62%, transparent); backdrop-filter: blur(6px); padding: 7px 13px; border-radius: var(--radius-md); pointer-events: none; }
.awx .cmp__tag--before { left: 14px; }
.awx .cmp__tag--after { right: 14px; }

/* ---------- Galerie ---------- */
.awx .b-gal { display: grid; grid-template-columns: 1.4fr 1fr; grid-auto-rows: 1fr; gap: 14px; margin-top: clamp(40px, 6vw, 72px); }
.awx .b-gal figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); }
.awx .b-gal figure:first-child { grid-row: span 2; }
.awx .b-gal img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; transition: transform var(--dur-slow) var(--ease-out); }
.awx .b-gal figure:hover img { transform: scale(1.04); }
.awx .b-gal figcaption { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.5); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: var(--radius-pill); } /* v4.72: #fff → var(--alpenlicht) (Audit 12.07.2026) */
@media (max-width: 860px) {
  .awx .b-gal { display: flex; grid-template-columns: none; grid-auto-rows: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; cursor: grab; }
  .awx .b-gal::-webkit-scrollbar { display: none; }
  .awx .b-gal figure { flex: 0 0 76%; scroll-snap-align: center; grid-row: auto; }
  .awx .b-gal figure:first-child { grid-row: auto; }
  .awx .b-gal img { min-height: 0; height: auto; aspect-ratio: 4/5; }
}

/* ---------- Manufaktur / Gravur (Split-Story) ---------- */
.awx .b-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.awx .b-story + .b-story { margin-top: clamp(48px,7vw,88px); }
.awx .b-story--rev { grid-template-columns: 1.1fr .9fr; }
.awx .b-story--rev figure { order: 2; }
.awx .b-story figure { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-mid); box-shadow: var(--shadow-dark-xl); }
.awx .b-story figure img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.awx .b-story figcaption { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.72); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: var(--radius-pill); } /* v4.72: #fff → var(--alpenlicht) (Audit 12.07.2026) */
.awx .b-story__copy h2, .awx .b-story__copy h3 { font-size: var(--fs-h2-split); letter-spacing: -.025em; margin-top: 14px; }
.awx .b-story__copy p { color: var(--fg-muted); font-weight: 400; margin-top: 16px; max-width: 52ch; }
.awx .b-story__copy .btn { margin-top: 24px; }
.awx .b-story__link { display: inline-block; margin-top: 20px; color: var(--alpenlicht); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--border-mid); transition: text-decoration-color var(--dur-base); }
.awx .b-story__link:hover { text-decoration-color: var(--bergsonne); }
@media (max-width: 860px) {
  .awx .b-story, .awx .b-story--rev { grid-template-columns: 1fr; gap: 20px; }
  .awx .b-story--rev figure { order: 0; }
}

/* ---------- Reviews ---------- */
.awx .b-revs { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--border-mid); }
.awx .b-rev { padding: clamp(18px,2.2vw,28px) clamp(16px,2vw,24px); border-right: 1px solid var(--border-mid); display: flex; flex-direction: column; gap: 10px; }
.awx .b-rev:last-child { border-right: 0; }
.awx .b-rev__stars { color: var(--aw-star); font-size: var(--fs-13); letter-spacing: 2px; } /* v19.07: Sterne IMMER Amazon-Gold */
.awx .b-rev p { font-family: var(--font-serif); font-size: var(--fs-18); line-height: 1.45; color: var(--alpenlicht); }
/* Kundenfoto als Karten-Kopf, nicht als Avatar: die Bilder zeigen das RELIEF, nicht
   ein Gesicht — als 56-px-Kreis war darauf nichts zu erkennen (am Test-Theme gesehen).
   Ueber die volle Kartenbreite traegt dasselbe Bild die Aussage des Zitats. */
.awx .b-rev--bild { padding-top: 0; }
.awx .b-rev__foto { width: calc(100% + 2 * clamp(16px,2vw,24px)); margin: 0 clamp(-24px,-2vw,-16px) clamp(14px,1.6vw,18px);
               aspect-ratio: 16/10; object-fit: cover; display: block; }
.awx .b-rev__who { margin-top: auto; color: var(--fg-muted); font-size: var(--fs-13); }
@media (max-width: 860px) {
  .awx .b-revs { display: flex; border-top: 0; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 2px; cursor: grab; }
  .awx .b-revs::-webkit-scrollbar { display: none; }
  .awx .b-rev { flex: 0 0 74%; scroll-snap-align: center; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); }
}

/* ---------- Qualifier ---------- */
.awx .b-qual { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; }
.awx .b-qual__col { padding: clamp(24px,3vw,40px); }
.awx .b-qual__col + .b-qual__col { border-left: 1px solid var(--border-mid); }
.awx .b-qual__col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-16); }
.awx .b-qual__col h3 svg { width: 20px; height: 20px; flex: none; }
.awx .b-qual__col.is-yes h3 svg { color: var(--accent-text); }
.awx .b-qual__col.is-no h3 { color: var(--fg-muted); }
.awx .b-qual__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.awx .b-qual__col li { display: flex; gap: 12px; color: var(--fg-muted); font-weight: 400; font-size: var(--fs-15); line-height: 1.5; }
.awx .b-qual__col li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.awx .b-qual__col.is-yes li svg { color: var(--accent-text); }
.awx .b-qual__col.is-no li svg { color: var(--fg-faint); }
@media (max-width: 860px) {
  .awx .b-qual { grid-template-columns: 1fr; }
  .awx .b-qual__col + .b-qual__col { border-left: 0; border-top: 1px solid var(--border-mid); }
}

/* ---------- FAQ (native details) ---------- */
.awx .b-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px,6vw,80px); align-items: start; }
.awx .b-faq__c { display: flex; flex-direction: column; }
.awx .b-faqi { border-top: 1px solid var(--border-mid); }
.awx .b-faqi__q { display: flex; gap: 18px; align-items: baseline; padding: 17px 0; cursor: pointer; list-style: none; }
.awx .b-faqi__q::-webkit-details-marker { display: none; }
.awx .b-faqi__q:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .b-faqi__n { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--accent-text); }
.awx .b-faqi__q h3 { font-family: var(--font-serif); font-size: var(--fs-20); font-weight: 400; flex: 1; }
.awx .b-faqi__chev { align-self: center; display: inline-flex; color: var(--fg-muted); transition: transform var(--dur-base) var(--ease-out); }
.awx .b-faqi__chev svg { width: 18px; height: 18px; }
.awx .b-faqi[open] .b-faqi__chev { transform: rotate(180deg); }
.awx .b-faqi[open] .b-faqi__q h3 { color: var(--alpenlicht); }
/* v18.07: FAQ-Antworten sind Kauf-Content, kein Beiwerk (Stephan mobil: "schlecht zu
   lesen") — voller Text-Ton statt muted, 400 statt Light, feste Lesbarkeits-Zeilenhoehe. */
.awx .b-faqi p { color: var(--fg); font-weight: 400; line-height: 1.6; margin: 0 0 20px 36px; max-width: 46ch; }
@media (max-width: 860px) { .awx .b-faq { grid-template-columns: 1fr; } }

/* ---------- Datenblatt ---------- */
.awx .b-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; }
.awx .b-spec { margin: 0; padding: clamp(20px,2.6vw,30px); border-right: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); }
.awx .b-spec:nth-child(3n) { border-right: 0; }
.awx .b-spec:nth-last-child(-n+3) { border-bottom: 0; }
.awx .b-spec dt { font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); }
.awx .b-spec dd { margin: 8px 0 0; font-size: var(--fs-15); color: var(--alpenlicht); font-weight: 400; }
@media (max-width: 860px) {
  .awx .b-specs { grid-template-columns: 1fr 1fr; }
  .awx .b-spec { border-right: 1px solid var(--border-mid) !important; border-bottom: 1px solid var(--border-mid) !important; }
  .awx .b-spec:nth-child(2n) { border-right: 0 !important; }
  .awx .b-spec:nth-last-child(-n+2) { border-bottom: 0 !important; }
}

/* ---------- CTA-Band ---------- */
.awx .b-cta { text-align: center; }
.awx .b-cta .b-shead { margin-bottom: 0; }
.awx .b-cta__row { display: flex; justify-content: center; margin-top: 30px; }

/* ---------- Reveal (nur unterhalb; Print/Reduced-Motion sicher) ---------- */
.awx .aw-reveal-ready [data-reveal] { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); will-change: opacity, transform; }
.awx .aw-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .awx .aw-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ---------- Mobile-Kompaktion ---------- */
@media (max-width: 640px) {
  .awx .b-sec { padding-block: 30px; }
  .awx #below-lines { padding-top: 30px; }
  .awx .b-shead { margin-bottom: 20px; }
  .awx .b-shead h2 { font-size: 3.04rem; margin-top: 10px; }
  .awx .b-shead p { font-size: var(--fs-15); margin-top: 10px; }
  .awx .lp-card__media { aspect-ratio: 16/10; }
  .awx .lp-card__body { padding: 18px 18px 20px; gap: 8px; }
  .awx .lp-card__name { font-size: 2.4rem; }
  .awx .lp-card__foot { padding-top: 12px; }
  .awx .lp-step { padding: 20px 18px; }
  .awx .lp-step__idx { font-size: 3.2rem; top: 16px; right: 18px; }
  .awx .lp-step__ico svg { width: 24px; height: 24px; }
  .awx .lp-step h3 { font-size: var(--fs-20); margin: 12px 0 6px; }
  .awx .lp-step p { font-size: var(--fs-14); }
  .awx .cmp-copy h2 { font-size: 3.04rem; }
  .awx .cmp-copy p { font-size: var(--fs-15); margin-top: 12px; }
  .awx .cmp-grid { gap: 20px; }
  .awx .b-rev { padding: 16px; gap: 8px; }
  .awx .b-rev p { font-size: var(--fs-16); }
  .awx .b-faqi__q { padding: 14px 0; gap: 14px; }
  .awx .b-faqi__q h3 { font-size: var(--fs-16); }
  /* v18.07: mobil 16 statt 14 — Zielgruppe 50+ (Stephan 18.07.) */
  .awx .b-faqi p { margin: 0 0 16px 28px; font-size: var(--fs-16); }
  .awx .b-story__copy h2, .awx .b-story__copy h3 { font-size: 2.72rem; }
  .awx .b-story__copy p { font-size: var(--fs-15); margin-top: 12px; }
  .awx .b-qual__col { padding: 20px 18px; }

  /* USP-Kacheln (Was Du bekommst): kompaktes 2×2 statt riesiger Spalten */
  .awx .lp-steps--4 { grid-template-columns: 1fr 1fr; }
  .awx .lp-steps--4 .lp-step { border-right: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); padding: 16px 14px; }
  .awx .lp-steps--4 .lp-step:nth-child(2n) { border-right: 0; }
  .awx .lp-steps--4 .lp-step:nth-last-child(-n+2) { border-bottom: 0; }
  .awx .lp-steps--4 .lp-step__ico svg { width: 20px; height: 20px; }
  .awx .lp-steps--4 .lp-step h3 { font-size: var(--fs-16); margin: 10px 0 5px; }
  .awx .lp-steps--4 .lp-step p { font-size: var(--fs-13); line-height: 1.45; }
}


/* ---------- Filter-Chips (z. B. Alle / Trail / Rennrad) ---------- */
.awx .b-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.awx .b-filter button {
  min-height: 38px; padding: 8px 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-mid);
  background: transparent; color: color-mix(in oklch, var(--alpenlicht) 75%, transparent);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.awx .b-filter button:hover { border-color: color-mix(in oklch, var(--alpenlicht) 30%, transparent); }
.awx .b-filter button[aria-pressed="true"] { background: var(--alpenlicht); border-color: var(--alpenlicht); color: var(--felsgestein); }

/* ---------- Event-Liste (editoriale Zeilen, keine Tabelle) ---------- */
.awx .b-evt { border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; }
.awx .b-evt__row {
  display: grid; grid-template-columns: 118px 1.5fr 1fr auto auto; gap: 16px;
  align-items: center; padding: 16px 22px;
  border-top: 1px solid var(--border-mid);
  text-decoration: none; color: inherit;
  transition: background var(--dur-base) var(--ease-out);
}
.awx .b-evt__row:first-child { border-top: 0; }
.awx .b-evt__row:hover { background: color-mix(in srgb, var(--alpenlicht) 4%, transparent); }
.awx .b-evt__row[hidden] { display: none; }
.awx .b-evt__date { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.awx .b-evt__name { font-family: var(--font-serif); font-size: var(--fs-20); line-height: 1.15; }
.awx .b-evt__name small { display: block; font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 400; color: var(--fg-muted); margin-top: 3px; }
.awx .b-evt__meta { font-size: var(--fs-13); color: var(--fg-muted); font-weight: 400; }
.awx .b-evt__meta b { color: color-mix(in oklch, var(--alpenlicht) 82%, transparent); font-weight: 500; }
.awx .b-evt__tag {
  justify-self: start; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-mid); color: var(--fg-muted);
}
.awx .b-evt__tag--gold { background: var(--bergsonne); border-color: var(--bergsonne); color: var(--aw-on-accent); }
.awx .b-evt__go { justify-self: end; color: var(--accent-text); font-size: var(--fs-16); transition: transform var(--dur-base) var(--ease-out); }
.awx .b-evt__row:hover .b-evt__go { transform: translateX(4px); }
@media (max-width: 860px) {
  .awx .b-evt__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
  .awx .b-evt__date { grid-column: 1; }
  .awx .b-evt__tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .awx .b-evt__name { grid-column: 1 / -1; font-size: var(--fs-18); }
  .awx .b-evt__meta { grid-column: 1 / -1; font-size: var(--fs-12); }
  .awx .b-evt__go { display: none; }
}


.awx [data-parallax] { will-change: transform; }

/* ===================== SECTION: marquee-trust (b-home) ===================== */
.awx .b-marq { border-block: 1px solid var(--border-mid); overflow: hidden; padding: 0; }
.awx .b-marq__t { display: flex; gap: 56px; white-space: nowrap; padding: 18px 0; animation: bMarq 32s linear infinite; }
.awx .b-marq__t span { font-family: var(--font-serif); font-size: var(--fs-20); color: var(--fg-muted); display: inline-flex; align-items: center; gap: 56px; }
.awx .b-marq__t span::after { content: "•"; color: var(--accent-text); }
@keyframes bMarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .awx .b-marq__t { animation: none; } }

/* ===================== SECTION: stage-grid (Live-3D-Teaser, Home + Landingpage) ===================== */
.awx .b-stage-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 860px) { .awx .b-stage-grid { grid-template-columns: 1fr; } }
.awx .b-stage-grid .aw-stage { aspect-ratio: 4/3.3; box-shadow: var(--shadow-dark-xl); border: 1px solid var(--border-mid); }
.awx .b-feat { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 0; }
.awx .b-feat li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border-mid); }
.awx .b-feat li:last-child { border-bottom: 1px solid var(--border-mid); }
.awx .b-feat svg { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
.awx .b-feat b { font-weight: 500; display: block; } .awx .b-feat span { color: var(--fg-muted); font-size: var(--fs-14); }
.awx .b-price { display: flex; align-items: baseline; gap: 14px; }
.awx .b-price .amt { font-family: var(--font-serif); font-size: clamp(3.52rem,4vw,4.8rem); color: var(--alpenlicht); font-variant-numeric: tabular-nums; }
.awx .b-price .note { color: var(--fg-muted); font-size: var(--fs-14); }
.awx .b-stage-grid + .lp-steps, .awx .lp-steps--mt { margin-top: clamp(48px, 7vw, 88px); }

/* ===================== SECTION: lines-editorial (Produktlinien als Zeilen, b-home) ===================== */
.awx .b-lines { border-top: 1px solid var(--border-mid); }
.awx .b-line { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 24px; align-items: center; padding: clamp(22px,3vw,40px) 0; border-bottom: 1px solid var(--border-mid); text-decoration: none; color: var(--alpenlicht); position: relative; transition: padding-left var(--dur-base) var(--ease-out); }
.awx .b-line:hover { padding-left: 18px; }
.awx .b-line__n { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--accent-text); }
.awx .b-line__name { font-family: var(--font-serif); font-size: clamp(2.88rem, 4vw, 5.12rem); letter-spacing: -.02em; }
.awx .b-line__desc { color: var(--fg-muted); font-weight: 400; max-width: 36ch; font-size: var(--fs-15); }
.awx .b-line__price { font-family: var(--font-serif); font-size: var(--fs-20); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.awx .b-line__arrow { color: var(--accent-text); font-size: var(--fs-24); transition: transform var(--dur-base) var(--ease-out); }
.awx .b-line:hover .b-line__arrow { transform: translateX(8px); }
.awx .b-line__peek { position: absolute; right: 120px; top: 50%; width: 240px; height: 160px; transform: translateY(-50%) scale(.92); border-radius: var(--radius-md); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); box-shadow: var(--shadow-xl); z-index: 3; }
.awx .b-line:hover .b-line__peek { opacity: 1; transform: translateY(-50%) scale(1); }
.awx .b-line__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .awx .b-line { grid-template-columns: 40px 1fr auto; } .awx .b-line__desc, .awx .b-line__peek { display: none; } }

/* ===================== SECTION: hero-split (Landingpage: Text links, Bild rechts) ===================== */
.awx .lp-hero { position: relative; min-height: 82vh; min-height: 82svh; display: flex; align-items: center; overflow: hidden; }
.awx .lp-hero__bg { position: absolute; inset: -64px 0 -64px auto; width: 62%; z-index: 0; will-change: transform; }
@media (max-width: 860px) {
  /* v18.07: Stacked-Mobile-Fix — der Textblock landete auf hellem Farbwelt-Grund (Creme),
     behielt aber die data-theme="dark"-Insel-Textfarben (hell) → H1/Lead unlesbar (weiss auf
     creme). Ursache: das dunkle Section-Fundament kam bisher nur aus .lp-hero::before, das im
     Stacked-Layout display:none ist. Fix: Section-Grund im Stacked-Layout dunkel fuellen —
     --felsgestein ist in der dark-Insel dunkel (in BEIDEN Farbwelten), so haben die hellen
     Ink-Tokens wieder >=4.5:1 Kontrast und das Bild laeuft nahtlos in die Textflaeche aus
     (.lp-hero__bg::after fadet bereits zu --felsgestein). */
  .awx .lp-hero { flex-direction: column; align-items: stretch; min-height: 0; height: auto; background: var(--felsgestein); }
  /* v19.07: Hero-Fold — Bildzone mobil niedriger (46→38svh), damit Eyebrow/Headline in die obere
     Viewport-Haelfte ruecken statt bottom-heavy im unteren Drittel zu kleben (Eyebrow ~34% statt ~48%) */
  .awx .lp-hero__bg { position: relative; inset: auto; width: 100%; height: 38vh; height: 38svh; transform: none !important; overflow: hidden; }
  .awx .lp-hero__bg img { transform: none !important; }
  .awx .lp-hero::before, .awx .lp-hero::after { display: none; }
  .awx .lp-hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 58%, color-mix(in oklch, var(--felsgestein) 60%, transparent) 80%, var(--felsgestein) 100%); }
  /* v19.07: symmetrisches padding-block statt top-eng/bottom-lastig — Content vertikal ausbalanciert */
  .awx .lp-hero__in { position: relative; z-index: 2; margin-top: -1px; padding-block: clamp(24px,6vw,40px); }
}
.awx .lp-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: center right; opacity: 0; transition: opacity 1s var(--ease-inout); }
.awx .lp-hero__bg img.is-active { opacity: 1; }
.awx .lp-hero__bg img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .awx .lp-hero__bg.is-rotating img:first-child:not(.is-active) { opacity: 0; } }
.awx .lp-hero::before { content:""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--felsgestein) 0%, var(--felsgestein) 42%, color-mix(in oklch, var(--felsgestein) 80%, transparent) 54%, color-mix(in oklch, var(--felsgestein) 52%, transparent) 66%, color-mix(in oklch, var(--felsgestein) 26%, transparent) 79%, transparent 93%),
    linear-gradient(180deg, rgba(30,30,28,0) 60%, rgba(30,30,28,.5) 90%, var(--felsgestein) 100%); }
.awx .lp-hero::after { content: none; }
/* v2.4 P21 (09.07.2026): Topo-Linien nicht übers Hero-Bild — auf die Textfläche geclippt
   (Bild belegt rechts 62% Desktop bzw. oberes 46svh mobil; ohne Bild bleibt volle Fläche) */
.awx .lp-hero .aw-topo { color: var(--alpenlicht); opacity: .18; z-index: 1; }
/* v2.10 (Stephan 11.07.): weicher Hoehenlinien-AUSLAUF statt harter Kante — Linien
   blenden in der Bild-Fade-Zone aus (P21-Ziel bleibt: nicht uebers volle Bild) */
.awx .lp-hero:has(.lp-hero__bg) .aw-topo {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 64%);
}
@media (max-width: 860px) {
  .awx .lp-hero:has(.lp-hero__bg) .aw-topo {
    -webkit-mask-image: linear-gradient(180deg, transparent 32svh, #000 52svh);
    mask-image: linear-gradient(180deg, transparent 32svh, #000 52svh);
  }
}
.awx .lp-hero__in { position: relative; z-index: 2; width: 100%; }
.awx .lp-hero__col { max-width: 38ch; }
.awx .lp-hero h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -.03em; margin: 18px 0 0; }
.awx .lp-hero p.lead { font-size: clamp(1.68rem, 1.7vw, 2.08rem); color: color-mix(in oklch, var(--alpenlicht) 84%, var(--felsgestein)); font-weight: 400; margin-top: 26px; }
.awx .lp-hero__cta { margin-top: 38px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.awx .lp-hero__hint { color: var(--fg-muted); font-size: var(--fs-15); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--border-mid); transition: color var(--dur-base), text-decoration-color var(--dur-base); }
.awx .lp-hero__hint:hover { color: var(--accent-text); text-decoration-color: var(--bergsonne); }
.awx .lp-hero__hint .arr { color: var(--fg-muted); display: inline-block; }
.awx .lp-hero__facts { margin: 0; font-size: var(--fs-13); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.awx .lp-hero__facts .sep { color: var(--fg-faint); margin: 0 8px; }
@media (max-width: 640px) {
  /* v19.07: Hero-Fold — Bildzone auf Phones 40→30svh, Eyebrow startet bei ~33% Viewport (vorher ~44%) */
  .awx .lp-hero__bg { height: 30vh; height: 30svh; }
  .awx .lp-hero h1 { font-size: 3.28rem; margin-top: 12px; }
  .awx .lp-hero p.lead { font-size: 1.6rem; margin-top: 16px; }
  .awx .lp-hero__cta { margin-top: 24px; gap: 12px; }
  .awx .lp-hero__facts { font-size: var(--fs-12); }
  .awx .lp-spotlight { font-size: 2.72rem !important; margin: 12px 0 12px !important; }
}

/* lp-card Auswahl-Zustände (Landingpage: Karte wählt Linie) */
.awx .lp-card.is-sel { border-color: var(--bergsonne); box-shadow: 0 0 0 1px var(--bergsonne) inset; }
.awx .lp-card__sel { position: absolute; top: 12px; right: 12px; z-index: 2; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--aw-on-accent); background: var(--bergsonne); border-radius: var(--radius-pill); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.awx .lp-card__sel svg { width: 15px; height: 15px; }
.awx .lp-card__sel .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.awx .lp-card.is-sel .lp-card__sel { display: inline-flex; }
.awx .lp-card--match .lp-card__sel { display: none !important; }
.awx .lp-card.is-sel .lp-card__go { background: var(--bergsonne); border-color: transparent; color: var(--aw-on-accent); font-weight: 600; }
.awx .lp-card--match { border-color: var(--bergsonne); box-shadow: 0 0 0 1px var(--bergsonne) inset, var(--shadow-dark-xl); }
.awx .lp-card__match { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--aw-on-accent); background: var(--bergsonne); padding: 6px 12px; border-radius: var(--radius-pill); }

/* ===================== SECTION: sticky-cta-mobile (Landingpage) ===================== */
.awx .lp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--felsgestein) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border-mid); display: none; transform: translateY(110%); transition: transform 320ms var(--ease-out); }
.awx .lp-sticky.is-on { transform: none; }
.awx .lp-sticky__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.awx .lp-sticky__price { display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
.awx .lp-sticky__price b { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); color: var(--alpenlicht); }
.awx .lp-sticky__price small { font-size: var(--fs-13); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.awx .lp-sticky .btn { flex: none; white-space: nowrap; padding: 10px 16px; font-size: var(--fs-14); }
.awx .lp-sticky--fix { transform: none; }
@media (max-width: 860px) { .awx .lp-sticky { display: block; } .awx.has-sticky { padding-bottom: var(--sticky-h, 76px); } }

/* Header-Fade (Opt-in via <body data-head-fade>): Scroll-gekoppelt solid */
.awx[data-head-fade] .awc-head::before { display: none; }
.awx[data-head-fade] .awc-head {
  --head-solid: 0;
  background-color: color-mix(in oklch, var(--felsgestein) calc(var(--head-solid) * 100%), transparent);
  background-image: linear-gradient(to bottom, color-mix(in oklch, var(--felsgestein) 82%, transparent) 0%, color-mix(in oklch, var(--felsgestein) 64%, transparent) 62%, color-mix(in oklch, var(--felsgestein) 30%, transparent) 100%);
  border-bottom: 1px solid color-mix(in oklch, var(--alpenlicht) calc(14% + var(--head-solid) * 6%), transparent);
  transition: background-color 140ms linear, border-color 140ms linear;
}
.awx[data-head-fade] .awc-head .awc-icon { color: var(--alpenlicht); opacity: 1; }
.awx[data-head-fade] .awc-head .awc-icon:hover { opacity: .7; }

/* ===================== SECTION: pdp-shell + pdp-cockpit (b-pdp*) ===================== */
.awx .b-crumb { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-faint); padding: 100px 0 14px; }
.awx .b-crumb a { color: var(--fg-muted); text-decoration: none; }
/* v18.07 CRO-FIX-1 (Stephan, mobil): ~200px Leerraum ueber der Galerie. Ursache: die PDP-
   Wrapper-Section traegt .section-Padding (clamp 56–120px) UND der Breadcrumb .b-crumb sein
   eigenes padding-top:100px (Header-Clearance). Beides stapelte sich. Fix: EINE header-hohe
   Clearance auf der PDP-Section, Breadcrumb ohne Extra-Top. Greift auch ohne Breadcrumb
   (dann klart .pdp direkt). Scope via #aw-pdp-Sentinel — nur diese Section, global unberuehrt. */
/* v19.07d: Header ist jetzt sticky-im-Fluss (nicht mehr fixed) -> keine Header-Clearance mehr
   noetig, nur normaler Section-Abstand. Vorher clamp(84–104px) fuer den fixen Header. */
.awx .shopify-section:has(#aw-pdp) { padding-block-start: clamp(20px, 4vw, 36px); }
.awx .shopify-section:has(#aw-pdp) .b-crumb { padding-top: 0; }
.awx .pdp { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(24px,3.5vw,56px); align-items: start; padding-bottom: clamp(48px,7vw,96px); position: relative; overflow-anchor: none; }
.awx .pdp::before { content:""; position: absolute; inset: -60px 0; /* kein H-Bleed: -50vw erzeugte H-Scroll */ background: radial-gradient(60% 50% at 30% 30%, color-mix(in oklch, var(--alpenlicht) 6%, transparent), transparent 70%); pointer-events: none; }
.awx .pdp__stage-col { position: sticky; top: 86px; z-index: 1; }
.awx .pdp .aw-stage { aspect-ratio: 4/3.6; border: 1px solid var(--border-mid); box-shadow: var(--shadow-dark-xl); background: #000; }
.awx .stage-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 14px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); }
.awx .stage-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.awx .stage-thumbs img { width: 64px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-mid); opacity: .55; cursor: pointer; }
.awx .stage-thumbs img:hover { opacity: 1; }
.awx .stage-claim { margin-top: 28px; }
.awx .stage-claim h1 { font-size: clamp(3.84rem,5vw,6.4rem); letter-spacing: -.03em; line-height: .98; }
/* v19.07 PDP-H1: Teil nach '|' (Bergnamen) als kleinere Subline — Liquid-Split in aw_main_pdp.liquid.
   Bleibt in der H1, aber halbe Display-Groesse + gedeckt, damit der lange Titel den Fold nicht frisst. */
.awx .stage-claim h1 .stage-claim__sub { display: block; font-size: clamp(2.4rem,3.4vw,3.36rem); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; color: var(--fg-muted); margin-top: .14em; }
.awx .stage-claim .b-vendor { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.awx .stage-claim p { color: var(--fg-muted); font-weight: 400; max-width: 50ch; margin-top: 12px; }
/* v19.07 PDP-H1: mobil ruhigere Zeilenhoehe (Fold-Schutz); Titel steht dank clamp-Floor bei ~38px. */
@media (max-width: 860px) { .awx .stage-claim h1 { line-height: 1.06; } }
.awx .cockpit { position: sticky; top: 86px; z-index: 2; background: var(--alpenlicht); color: var(--felsgestein); border-radius: var(--radius-xl); padding: clamp(22px,2.4vw,30px); box-shadow: var(--shadow-dark-xl); border: 1px solid color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); }
.awx .cockpit .ck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.awx .cockpit .ck-vendor { font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-subtle); }
.awx .cockpit h2 { font-size: var(--fs-24); }
.awx .cockpit .ck-rating { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--fg-muted); margin-top: 6px; }
.awx .cockpit .ck-rating .s { color: var(--aw-star); } /* v19.07: Sterne IMMER Amazon-Gold */
.awx .ck-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 16px 0; padding: 14px 0; border-block: 1px solid var(--border); }
.awx .ck-price .amt { font-family: var(--font-serif); font-size: clamp(3.2rem,3.6vw,4.16rem); line-height: 1; font-variant-numeric: tabular-nums; }
.awx .ck-price .note { font-size: var(--fs-13); color: var(--fg-subtle); }
.awx .ck-step { padding: 16px 0; border-top: 1px solid var(--border); }
.awx .ck-step:first-of-type { border-top: 0; padding-top: 4px; }
.awx .ck-step .opt-label { margin-bottom: 10px; }
.awx .ck-step .step__n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--bergsonne-dark); margin-right: 8px; }
.awx .ck-step .lbl { font-family: var(--font-serif); font-size: var(--fs-18); }
.awx .ck-step .hint { font-size: var(--fs-12); color: var(--fg-subtle); }
.awx .gpx-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: var(--fs-13); color: var(--fg-muted); flex-wrap: wrap; }
.awx .gpx-row a { color: var(--fg); }
.awx .ck-atc { margin-top: 8px; }
.awx .promise { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--bg-subtle); margin-top: 16px; display: flex; gap: 12px; }
.awx .promise svg { width: 20px; height: 20px; color: var(--bergsonne-dark); flex: none; }
.awx .promise p { font-size: var(--fs-13); color: var(--fg); margin: 4px 0 0; } /* v18.07d Kontrast: Versprechen-Text auf volles --fg (war grau-auf-dunkel) */
.awx .heritage { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg-faint); text-align: center; margin-top: 14px; }
.awx .get-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; }
.awx .get { padding: 28px; border-right: 1px solid var(--border-mid); display: flex; flex-direction: column; gap: 10px; }
.awx .get:last-child { border-right: 0; }
.awx .get svg { width: 24px; height: 24px; color: var(--accent-text); }
.awx .get h3 { font-size: var(--fs-18); } .awx .get p { font-size: var(--fs-14); color: var(--fg-muted); font-weight: 400; margin: 0; }
.awx .specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 clamp(32px,5vw,64px); }
.awx .spec { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border-mid); font-size: var(--fs-15); }
.awx .spec dt { color: var(--fg-muted); } .awx .spec dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .awx .pdp { grid-template-columns: minmax(0, 1fr); }
  .awx .pdp__stage-col, .awx .cockpit { position: static; }
  .awx .get-grid { grid-template-columns: 1fr 1fr; } .awx .get:nth-child(2) { border-right: 0; } .awx .get:nth-child(1), .awx .get:nth-child(2) { border-bottom: 1px solid var(--border-mid); }
  .awx .specs { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .awx .get-grid { grid-template-columns: 1fr; } .awx .get { border-right: 0; border-bottom: 1px solid var(--border-mid); } }

/* v18.07 CRO-FIX-3 — mobiler Kauf-Anker unter der PDP-Galerie (nur Konfigurator-Modus, Markup
   in aw_main_pdp.liquid). Desktop: aus. Mobil (≤860px): kompakte Preis-/Bewertungs-/CTA-Zeile,
   damit above the fold ein Kaufsignal steht. Dunkler Stage-Kontext → Tokens der Felsgestein-Welt. */
.awx .pdp-buyanker { display: none; }
@media (max-width: 860px) {
  .awx .pdp-buyanker { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-mid); border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--alpenlicht) 4%, var(--felsgestein)); }
  .awx .pdp-buyanker__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .awx .pdp-buyanker__price { font-family: var(--font-serif); font-size: var(--fs-24); line-height: 1; color: var(--alpenlicht); }
  .awx .pdp-buyanker__ab { font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 400; color: var(--fg-muted); }
  .awx .pdp-buyanker__rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--fg-muted); }
  .awx .pdp-buyanker__rating .s { color: var(--aw-star); letter-spacing: 1px; } /* v19.07: Sterne IMMER Amazon-Gold */
  .awx .pdp-buyanker__cta { flex: 0 0 auto; }
}
@media (max-width: 380px) { .awx .pdp-buyanker__cta { flex: 1 1 100%; } }

/* ===================== SECTION: cart (Warenkorb-App, b-cart) ===================== */
.awx .cart-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(96px,13vh,150px) clamp(20px,5vw,56px) clamp(60px,9vw,110px); }
.awx .cart-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 860px) { .awx .cart-grid { grid-template-columns: 1fr; } }
.awx .cart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.awx .cart-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.2rem,4vw,4.48rem); letter-spacing: -.02em; }
.awx .cart-head span { font-family: var(--font-mono); font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .ci { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 24px 0; border-top: 1px solid var(--border-mid); }
.awx .ci__media { width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 6%, var(--felsgestein)); }
.awx .ci__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .ci__name { font-family: var(--font-serif); font-size: var(--fs-20); }
.awx .ci__line { font-family: var(--font-sans); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); margin-top: 2px; }
.awx .ci__props { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.awx .ci__prop { font-size: var(--fs-12); padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--alpenlicht) 7%, var(--felsgestein)); color: color-mix(in oklch, var(--alpenlicht) 78%, var(--felsgestein)); }
.awx .ci__actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.awx .qty { display: inline-flex; align-items: center; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-pill); }
.awx .qty button { width: 32px; height: 32px; background: none; border: 0; color: var(--fg); cursor: pointer; font-size: 16px; }
.awx .qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.awx .ci__remove { background: none; border: 0; color: color-mix(in oklch, var(--fg) 72%, transparent); font-size: var(--fs-13); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.awx .ci__remove:hover { color: var(--fg); } /* v4.54: hover ging auf Alpenlicht = weiss-auf-hell -> Link verschwand beim Draufgehen (helle Cart-Insel); semantisch = hover wird KLARER statt heller */
.awx .ci__price { font-family: var(--font-serif); font-size: var(--fs-20); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* v4.53 — Kind-Zeile (Track-Upgrade) unterm Eltern-Relief */
.awx .ci__child { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px;
  border-radius: var(--radius-md); background: color-mix(in oklch, var(--bergsonne) 7%, transparent);
  font-size: var(--fs-13); line-height: 1.35; }
.awx .ci__child-ico { width: 16px; height: 16px; flex: none; opacity: .75; }
.awx .ci__child-name { flex: 1; min-width: 0; }
.awx .ci__child-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* v4.68 — SEO-Bloecke (Snocks): OFFENE Content-Kacheln im Grid, kein Accordion */
.awx .seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 26px; } /* v4.70: align-items stretch (Default) — Reihenhoehen fluchten, kein Flatter */
@media (max-width: 1100px) {
  .awx .seo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.awx .seo-karte { border: 1px solid var(--border-mid); border-radius: var(--radius-lg);
  padding: 18px 20px; background: color-mix(in srgb, var(--alpenlicht) 4%, transparent); }
.awx .seo-karte h3 { font-size: var(--fs-15); margin: 0 0 8px; }
.awx .seo-karte p, .awx .seo-karte ul { color: color-mix(in oklch, var(--fg) 76%, transparent);
  font-size: var(--fs-14); line-height: 1.6; margin: 0; }
.awx .seo-karte p + p { margin-top: 8px; }
@media (max-width: 720px) {
  .awx .seo-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .awx .seo-karte { padding: 15px 16px; }
}

/* v4.55 — Duo-Deal-Banner (Cart) */
.awx .cart-duo { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px;
  border-radius: var(--radius-lg); background: var(--aw-accent-wash-soft);
  color: var(--fg); }
.awx .cart-duo__ico { width: 30px; height: 30px; flex: none; color: var(--bergsonne); }
.awx .cart-duo__txt { flex: 1; min-width: 0; }
.awx .cart-duo__txt b { font-family: var(--font-serif); font-size: var(--fs-16); }
.awx .cart-duo__txt p { margin: 3px 0 0; font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 78%, transparent); }
.awx .cart-duo__cta { flex: none; padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--bergsonne); color: var(--bergsonne); text-decoration: none;
  font-size: var(--fs-13); white-space: nowrap; transition: background var(--dur-base), color var(--dur-base); }
.awx .cart-duo__cta:hover { background: var(--bergsonne); color: var(--aw-on-accent); }
@media (max-width: 560px) {
  .awx .cart-duo { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .awx .cart-duo__cta { flex: 1 1 100%; text-align: center; }
}

/* v4.60 — Gravur als Kind-Zeile + Summary-Kontrast */
.awx .ci__child--gravur { flex-wrap: wrap; }
.awx .ci__child--gravur .engraving-text-display { font-style: italic; }
.awx .ci__child--gravur .engraving-actions { display: inline-flex; gap: 10px; align-items: center; }
.awx .ci__child--gravur .engraving-text-edit { flex-basis: 100%; }
.awx .sum__express [data-express-price] { color: var(--bergsonne); font-weight: 600; }

/* v4.54 — Gravur-Upsell (Chip + Inline-Form) */
.awx .ci__gvup { margin-top: 8px; }
.awx .ci__gvform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.awx .ci__gvform .engraving-text-input { flex: 1 1 180px; min-width: 0; }
.awx .ci--engrave { background: color-mix(in oklch, var(--bergsonne) 6%, var(--felsgestein)); border-radius: var(--radius-md); padding: 18px; grid-template-columns: 40px 1fr auto; align-items: center; }
.awx .ci--engrave .ci__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; }
.awx .ci--engrave svg { width: 20px; height: 20px; color: var(--accent-text); }
.awx .engrave-text { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--alpenlicht); }
.awx .engrave-edit { display: none; gap: 8px; margin-top: 8px; }
.awx .engrave-edit.show { display: flex; }
.awx .engrave-edit input { flex: 1; padding: 9px 12px; background: var(--felsgestein); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); color: var(--alpenlicht); font-family: var(--font-sans); font-size: var(--fs-14); }
.awx .engrave-edit input:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .link-btn { background: none; border: 0; color: var(--accent-text); font-size: var(--fs-13); cursor: pointer; text-decoration: underline; padding: 0; }
.awx .sum { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: clamp(22px,3vw,32px); background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); position: sticky; top: 100px; }
.awx .sum h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); margin: 0 0 18px; }
.awx .sum__row { display: flex; justify-content: space-between; font-size: var(--fs-15); padding: 9px 0; color: color-mix(in oklch, var(--alpenlicht) 80%, var(--felsgestein)); }
.awx .sum__row--total { border-top: 1px solid var(--border-mid); margin-top: 8px; padding-top: 16px; font-family: var(--font-serif); font-size: var(--fs-24); color: var(--alpenlicht); }
.awx .sum__note { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); margin-top: 4px; }
.awx .sum .aw-btn { width: 100%; margin-top: 18px; }
.awx .sum__trust { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-mid); }
.awx .sum__trust span { display: flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); }
.awx .sum__trust svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.awx .ddp { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); margin-top: 14px; line-height: 1.5; }
.awx .xs { margin-top: 40px; }
.awx .xs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 560px) { .awx .xs__row { grid-template-columns: 1fr; } }
.awx .xs__card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border-mid); border-radius: var(--radius-md); padding: 14px; }
.awx .xs__card img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; }
.awx .xs__card b { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-16); display: block; }
.awx .xs__card p { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 64%, var(--felsgestein)); margin: 2px 0 0; }
.awx .xs__add { margin-left: auto; white-space: nowrap; }

/* ===================== SECTION: partner-programme (b-partnerprogramm) ===================== */
.awx .pp-progs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .awx .pp-progs { grid-template-columns: 1fr; } }
.awx .pp-prog { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 36px 32px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .pp-prog:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .pp-prog__head { text-align: center; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border-mid); }
.awx .pp-prog__name { font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .pp-prog__rate { font-family: var(--font-serif); font-size: clamp(3.2rem,4vw,4.48rem); margin-top: 8px; }
.awx .pp-prog ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.awx .pp-prog li { font-size: var(--fs-15); display: flex; gap: 11px; color: color-mix(in oklch, var(--alpenlicht) 84%, var(--felsgestein)); }
.awx .pp-prog li svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; margin-top: 3px; }
.awx .pp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .awx .pp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .awx .pp-steps { grid-template-columns: 1fr; } }
.awx .pp-step { text-align: center; }
.awx .pp-step__n { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--bergsonne); display: grid; place-items: center; margin: 0 auto 16px; font-family: var(--font-serif); font-size: var(--fs-24); }
.awx .pp-step h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-16); margin: 0 0 6px; }
.awx .pp-step p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 68%, var(--felsgestein)); margin: 0; }
.awx .pp-reqs { max-width: 760px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.awx .pp-reqs li { display: flex; gap: 13px; font-size: var(--fs-16); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 82%, var(--felsgestein)); }
.awx .pp-reqs li svg { width: 19px; height: 19px; color: var(--accent-text); flex: none; margin-top: 3px; }

/* ===================== SECTION: qualitaet-cards (b-qualitaet) ===================== */
.awx .ql-rr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .awx .ql-rr { grid-template-columns: minmax(0, 1fr); } }
.awx .ql-card { min-width: 0; overflow-wrap: break-word; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 32px 28px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .ql-card--feat { border-color: var(--bergsonne); background: color-mix(in oklch, var(--bergsonne) 6%, var(--felsgestein)); }
.awx .ql-card__i { width: 50px; height: 50px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; margin-bottom: 18px; }
.awx .ql-card__i svg { width: 24px; height: 24px; color: var(--accent-text); }
.awx .ql-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); margin: 0 0 10px; }
.awx .ql-card p { font-size: var(--fs-15); font-weight: 400; color: var(--fg); line-height: 1.6; margin: 0; } /* v18.07d Kontrast: Versprechen-Karte auf volles --fg + Gewicht 400 */

/* ===================== SECTION: quellen-steps (b-quellen) ===================== */
.awx .qm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .awx .qm-steps { grid-template-columns: 1fr; } }
.awx .qm-step { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 30px 26px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .qm-step__n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--accent-text); }
.awx .qm-step h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); margin: 12px 0 8px; }
.awx .qm-step p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); line-height: 1.6; margin: 0; }

/* ===================== SECTION: team (team.html) ===================== */
.awx .tp-team { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px,4vw,48px); }
.awx .tp-member { text-align: center; width: 150px; }
.awx .tp-member__av { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: var(--font-serif); font-size: 3.52rem; color: var(--accent-text); background: color-mix(in srgb, var(--alpenlicht) 8%, var(--felsgestein)); border: 1px solid var(--border-mid); }
.awx .tp-member b { display: block; font-size: var(--fs-18); font-family: var(--font-serif); font-weight: 400; }
.awx .tp-member span { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .tp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
@media (max-width: 860px) { .awx .tp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .awx .tp-steps { grid-template-columns: 1fr; } }
.awx .tp-step { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 28px 24px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .tp-step__n { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--accent-text); }
.awx .tp-step h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); margin: 12px 0 8px; }
.awx .tp-step p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); line-height: 1.55; margin: 0; }

/* ===================== SECTION: about (ueber-uns) ===================== */
.awx .ab-usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .awx .ab-usps { grid-template-columns: 1fr; } }
.awx .ab-usp { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 32px 28px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .ab-usp__tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-text); margin-bottom: 16px; }
.awx .ab-usp h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.08rem,2.2vw,2.56rem); margin: 0 0 12px; }
.awx .ab-usp p { color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); font-weight: 400; font-size: var(--fs-15); line-height: 1.6; margin: 0 0 16px; }
.awx .ab-usp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.awx .ab-usp li { font-size: var(--fs-14); display: flex; align-items: center; gap: 9px; color: color-mix(in oklch, var(--alpenlicht) 86%, var(--felsgestein)); }
.awx .ab-usp li svg { width: 15px; height: 15px; color: var(--accent-text); flex: none; }
.awx .ab-quote { border-top: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); padding: 26px 0; margin: 26px 0; }
.awx .ab-quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.92rem,2vw,2.4rem); line-height: 1.45; color: var(--alpenlicht); margin: 0; }
.awx .ab-note { background: var(--aw-accent-wash-soft); border-left: 3px solid var(--bergsonne); padding: 16px 20px; border-radius: var(--radius-sm); font-size: var(--fs-15); font-weight: 400; }
.awx .ab-note b { font-weight: 600; }
.awx .ab-inline { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0; }
.awx .ab-inline span { font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 8px; color: color-mix(in oklch, var(--alpenlicht) 84%, var(--felsgestein)); }
.awx .ab-inline svg { width: 16px; height: 16px; color: var(--accent-text); }
.awx .ab-feats { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 26px; }
.awx .ab-feat { display: inline-flex; align-items: center; gap: 11px; font-size: var(--fs-15); }
.awx .ab-feat i { width: 38px; height: 38px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; }
.awx .ab-feat i svg { width: 18px; height: 18px; color: var(--accent-text); }
.awx .ab-founder { display: grid; grid-template-columns: 380px 1fr; gap: clamp(40px,7vw,90px); align-items: start; }
@media (max-width: 860px) { .awx .ab-founder { grid-template-columns: 1fr; max-width: 540px; } }
.awx .ab-founder__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; }
.awx .ab-founder__img img { width: 100%; height: 100%; object-fit: cover; }
.awx .ab-founder__cap { text-align: center; margin-top: 16px; }
.awx .ab-founder__cap b { font-family: var(--font-serif); font-size: var(--fs-20); display: block; }
.awx .ab-founder__cap span { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .ab-founder__body p { color: color-mix(in oklch, var(--alpenlicht) 78%, var(--felsgestein)); font-weight: 400; line-height: 1.7; margin: 0 0 16px; }
.awx .ab-act { margin-top: 24px; padding: 22px; border: 1px solid var(--border-mid); border-radius: var(--radius-md); }
.awx .ab-act p { margin: 0 0 8px; font-size: var(--fs-15); }
.awx .ab-act p:last-child { margin: 0; font-style: italic; color: var(--accent-text); }
.awx .ab-sign { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-mid); }
.awx .ab-sign p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-20); margin: 0 0 6px; color: var(--alpenlicht); }
.awx .ab-sign span { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .ab-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto; }
@media (max-width: 860px) { .awx .ab-values { grid-template-columns: 1fr; } }
.awx .ab-value { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 30px 26px; text-align: center; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .ab-value:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .ab-value i { width: 56px; height: 56px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; margin: 0 auto 18px; }
.awx .ab-value i svg { width: 26px; height: 26px; color: var(--accent-text); }
.awx .ab-value h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); margin: 0 0 10px; }
.awx .ab-value p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); line-height: 1.55; margin: 0; }
.awx .ab-values--sm { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
@media (max-width: 860px) { .awx .ab-values--sm { grid-template-columns: 1fr; } }
.awx .ab-value--sm { display: flex; align-items: flex-start; gap: 15px; text-align: left; padding: 22px; }
.awx .ab-value--sm i { width: 42px; height: 42px; margin: 0; flex: none; }
.awx .ab-value--sm i svg { width: 20px; height: 20px; }
.awx .ab-value--sm h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-16); margin: 0 0 4px; }
.awx .ab-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }
.awx .ab-trust--feat { gap: 18px; margin-bottom: 36px; }
.awx .ab-trustcard { background: var(--alpenlicht); border-radius: var(--radius-md); padding: 22px 34px; display: grid; place-items: center; min-height: 84px; }
.awx .ab-trustcard img { max-height: 46px; max-width: 150px; width: auto; }
.awx .ab-trustlogos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.awx .ab-trustlogos .ab-trustcard { padding: 16px 26px; min-height: 64px; }
.awx .ab-trustlogos img { max-height: 32px; max-width: 120px; }
.awx .ab-proflogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.awx .ab-proflogo { padding: 28px 40px; background: color-mix(in srgb, var(--alpenlicht) 8%, var(--felsgestein)); border-radius: var(--radius-md); display: grid; place-items: center; min-height: 96px; min-width: 150px; }
.awx .ab-proflogo img { max-height: 46px; max-width: 130px; width: auto; filter: var(--aw-logo-filter); opacity: .9; }
.awx .ab-proflogo img.sm { max-height: 26px; }
.awx .ab-team { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px,4vw,48px); }
.awx .ab-member { text-align: center; width: 130px; }
.awx .ab-member__av { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: var(--font-serif); font-size: 3.2rem; color: var(--accent-text); background: color-mix(in srgb, var(--alpenlicht) 8%, var(--felsgestein)); border: 1px solid var(--border-mid); }
.awx .ab-member b { display: block; font-size: var(--fs-16); }
.awx .ab-member span { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); }
.awx .ab-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; }
@media (max-width: 860px) { .awx .ab-contacts { grid-template-columns: 1fr; } }
.awx .ab-contact { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 32px; text-align: center; text-decoration: none; color: var(--alpenlicht); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .ab-contact:hover { border-color: var(--bergsonne); transform: translateY(-4px); }
.awx .ab-contact i { width: 50px; height: 50px; border-radius: 50%; background: var(--aw-accent-wash); display: grid; place-items: center; margin: 0 auto 16px; }
.awx .ab-contact i svg { width: 22px; height: 22px; color: var(--accent-text); }
.awx .ab-contact h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-16); margin: 0 0 6px; }
.awx .ab-contact p { font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 64%, var(--felsgestein)); margin: 0; }
.awx .ab-showroom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,60px); align-items: center; margin-top: clamp(40px,6vw,64px); padding-top: clamp(40px,6vw,56px); border-top: 1px solid var(--border-mid); }
@media (max-width: 860px) { .awx .ab-showroom { grid-template-columns: 1fr; } .awx .ab-showroom__media { order: -1; } }
.awx .ab-showroom__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.awx .ab-showroom__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .ab-showroom h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem,2.6vw,3.2rem); margin: 0 0 12px; }
.awx .ab-showroom p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; margin: 0 0 18px; }

/* ===================== SECTION: b2b (b2b.html, event.html) ===================== */
.awx .b2b-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; }
.awx .b2b-kpi { padding: 30px 24px; border-right: 1px solid var(--border-mid); text-align: center; }
.awx .b2b-kpi:last-child { border-right: 0; }
.awx .b2b-kpi b { display: block; font-family: var(--font-serif); font-size: clamp(2.88rem,3.6vw,4.48rem); line-height: 1; font-variant-numeric: tabular-nums; }
.awx .b2b-kpi span { display: block; margin-top: 10px; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
@media (max-width: 860px) { .awx .b2b-kpis { grid-template-columns: 1fr 1fr; } .awx .b2b-kpi:nth-child(2) {border-right:0;} .awx .b2b-kpi:nth-child(1), .awx .b2b-kpi:nth-child(2) {border-bottom:1px solid var(--border-mid);} }
.awx .b2b-marquee { max-width: 1000px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.awx .b2b-marquee + .b2b-marquee { margin-top: 16px; }
.awx .b2b-track { display: flex; gap: 16px; width: max-content; padding: 4px 0; }
/* v18.07: Tempo aus Section-Setting (--mq-dur, aw_partner_marquee) steuerbar; 32s/38s = Fallback */
.awx .b2b-track--l { animation: b2b-ml var(--mq-dur, 32s) linear infinite; }
.awx .b2b-track--r { animation: b2b-mr var(--mq-dur, 38s) linear infinite; }
.awx .b2b-marquee:hover .b2b-track { animation-play-state: paused; }
@keyframes b2b-ml { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes b2b-mr { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .awx .b2b-track { animation: none !important; } }
.awx .b2b-logo { flex: none; height: 84px; min-width: 150px; display: grid; place-items: center; padding: 0 24px; background: var(--alpenlicht); border-radius: var(--radius-md); }
.awx .b2b-logo img { max-height: 40px; max-width: 116px; width: auto; }
.awx .b2b-logo img.sm { max-height: 26px; }
.awx .b2b-logo img.lg { max-height: 56px; max-width: 134px; }
.awx .b2b-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 40px; }
.awx .b2b-cat { font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 80%, var(--felsgestein)); display: inline-flex; align-items: center; gap: 9px; }
.awx .b2b-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bergsonne); }
.awx .b2b-sols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 860px) { .awx .b2b-sols { grid-template-columns: 1fr; } }
.awx .b2b-sol { position: relative; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: 34px 30px; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); display: flex; flex-direction: column; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .b2b-sol:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .b2b-sol--feat { border-color: var(--bergsonne); }
/* v18.07: Badge-Text editierbar machen — rendert die Section ein .b2b-sol__badge-Span
   (block.settings.feat_badge), gewinnt das Markup; ohne Span bleibt der ::after-Fallback
   (kein Regressions-Bruch). todo_global: feat_badge-Setting in aw_b2b_leistungen.liquid. */
.awx .b2b-sol--feat:not(:has(.b2b-sol__badge))::after { content: "Beliebteste Anfrage"; position: absolute; top: 0; right: 0; background: var(--bergsonne); color: var(--aw-on-accent); font-size: var(--fs-11); font-weight: 600; letter-spacing: .04em; padding: 7px 14px; border-radius: 0 var(--radius-lg) 0 12px; }
.awx .b2b-sol__badge { position: absolute; top: 0; right: 0; background: var(--bergsonne); color: var(--aw-on-accent); font-size: var(--fs-11); font-weight: 600; letter-spacing: .04em; padding: 7px 14px; border-radius: 0 var(--radius-lg) 0 12px; }
.awx .b2b-sol__tag { align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-text); margin-bottom: 16px; }
.awx .b2b-sol h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.24rem,2.4vw,3.04rem); line-height: 1.15; }
.awx .b2b-sol__meta { font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); margin: 8px 0 14px; }
.awx .b2b-sol p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; font-size: var(--fs-15); line-height: 1.6; margin: 0 0 18px; }
.awx .b2b-sol ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.awx .b2b-sol li { font-size: var(--fs-14); display: flex; align-items: flex-start; gap: 10px; color: color-mix(in oklch, var(--alpenlicht) 86%, var(--felsgestein)); }
.awx .b2b-sol li svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; margin-top: 2px; }
.awx .b2b-sol .aw-btn { margin-top: auto; }
.awx .b2b-uc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
@media (max-width: 860px) { .awx .b2b-uc { grid-template-columns: 1fr; } .awx .b2b-uc__media { order: -1; } }
.awx .b2b-uc__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.awx .b2b-uc__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .b2b-uclist { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.awx .b2b-uci { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--border-mid); border-radius: var(--radius-md); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .b2b-uci:hover { border-color: var(--border-mid-strong); transform: translateX(4px); }
.awx .b2b-uci__n { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--accent-text); flex: none; padding-top: 2px; }
.awx .b2b-uci h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-16); margin: 0 0 4px; }
.awx .b2b-uci p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); margin: 0; line-height: 1.55; }
.awx .b2b-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .awx .b2b-refs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .awx .b2b-refs { grid-template-columns: 1fr; } }
.awx .b2b-ref { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .b2b-ref:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .b2b-ref__img { aspect-ratio: 1/1; overflow: hidden; background: var(--felsgestein); }
.awx .b2b-ref__img img { width: 100%; height: 100%; object-fit: cover; }
.awx .b2b-ref__img.logo { display: grid; place-items: center; padding: 40px; background: radial-gradient(ellipse at center, color-mix(in oklch, var(--alpenlicht) 10%, var(--felsgestein)) 0%, var(--felsgestein) 72%); }
.awx .b2b-ref__img.logo img { width: auto; height: auto; max-width: 64%; max-height: 42%; object-fit: contain; }
.awx .b2b-ref__body { padding: 22px 22px 24px; }
/* v6.120: Logos waren mit 30 px max-height optisch ungleich gross — eine breite
   Wortmarke (GARMIN) lief in die max-width und wirkte gross, eine quadratische
   Bildmarke (Arc'teryx-Vogel) blieb winzig. Mehr Hoehe + etwas mehr Deckkraft holt
   die Bildmarken auf ein vergleichbares Gewicht. */
.awx .b2b-ref__logo { height: 36px; margin-bottom: 14px; display: flex; align-items: center; }
.awx .b2b-ref__logo img { max-height: 36px; max-width: 132px; width: auto; object-fit: contain; filter: var(--aw-logo-filter); opacity: .9; }
.awx .b2b-ref__logo span { font-family: var(--font-serif); font-size: var(--fs-18); color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); }
.awx .b2b-ref h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); margin: 0 0 8px; }
.awx .b2b-ref p { font-size: var(--fs-13); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein)); line-height: 1.55; margin: 0; }
.awx .b2b-ref__quote { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-mid); }
.awx .b2b-ref__quote p { font-style: italic; color: color-mix(in oklch, var(--alpenlicht) 82%, var(--felsgestein)); }
.awx .b2b-ref__quote span { display: block; margin-top: 8px; font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); font-style: normal; }
.awx .b2b-form { max-width: 760px; margin: 0 auto; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .b2b-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .awx .b2b-form__row { grid-template-columns: 1fr; } }
.awx .b2b-field { margin-bottom: 16px; }
.awx .b2b-field label { display: block; font-size: var(--fs-13); font-weight: 500; margin-bottom: 7px; }
.awx .b2b-field label i { color: var(--accent-text); font-style: normal; }
.awx .b2b-field input, .awx .b2b-field textarea { width: 100%; padding: 13px 15px; font-family: var(--font-sans); font-size: var(--fs-15); color: var(--alpenlicht); background: var(--felsgestein); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-base); }
.awx .b2b-field input:focus, .awx .b2b-field textarea:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .b2b-field textarea { min-height: 120px; resize: vertical; }
.awx .b2b-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.awx .b2b-choice { display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-pill); font-size: var(--fs-14); cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base); }
.awx .b2b-choice:has(input:checked) { border-color: var(--bergsonne); background: var(--aw-accent-wash-soft); }
.awx .b2b-choice input { accent-color: var(--bergsonne); width: 16px; height: 16px; }
.awx .b2b-form__note { text-align: center; font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); margin-top: 14px; }
.awx .b2b-form__note a { color: var(--accent-text); }
.awx .b2b-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.awx .b2b-contact { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--border-mid); border-radius: var(--radius-md); text-decoration: none; color: var(--alpenlicht); transition: border-color var(--dur-base); }
.awx .b2b-contact:hover { border-color: var(--bergsonne); }
.awx .b2b-contact svg { width: 20px; height: 20px; color: var(--accent-text); }
.awx .b2b-contact b { font-size: var(--fs-14); display: block; }
.awx .b2b-contact span { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); }

/* ===================== SECTION: magazin (magazin.html) ===================== */
.awx .mag-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.awx .mag-cat { font-family: var(--font-sans); font-size: var(--fs-13); padding: 8px 16px; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-pill); color: color-mix(in oklch, var(--alpenlicht) 78%, var(--felsgestein)); text-decoration: none; transition: border-color var(--dur-base), color var(--dur-base); }
.awx .mag-cat:hover, .awx .mag-cat[aria-current] { border-color: var(--bergsonne); color: var(--accent-text); }
.awx .mag-feat { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,5vw,64px); align-items: center; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
/* v18.07g: aspect-ratio + height:100% lief bei der 1280er-Kante ueber die Grid-Spalte
   (Bild ragte in den Titel) — Desktop-Zelle richtet sich jetzt nach der Texthoehe. */
.awx .mag-feat__media { position: relative; height: 100%; min-height: 340px; overflow: hidden; }
.awx .mag-feat__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .mag-feat__body { padding: clamp(24px,4vw,52px) clamp(24px,4vw,52px) clamp(24px,4vw,52px) 0; }
.awx .mag-feat__body h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.88rem,3.6vw,4.32rem); line-height: 1.08; letter-spacing: -.02em; margin: 14px 0 16px; }
.awx .mag-feat__body p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; line-height: 1.65; margin: 0 0 22px; max-width: 48ch; }
@media (max-width: 860px) { .awx .mag-feat { grid-template-columns: 1fr; } .awx .mag-feat__media { aspect-ratio: 16/9; } .awx .mag-feat__body { padding: clamp(20px,5vw,32px); } }
.awx .mag-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); display: flex; gap: 14px; }
.awx .mag-meta .cat { color: var(--accent-text); }
.awx .mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .awx .mag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .awx .mag-grid { grid-template-columns: 1fr; } }
.awx .mag-card { display: flex; flex-direction: column; text-decoration: none; color: var(--alpenlicht); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.awx .mag-card:hover { border-color: var(--border-mid-strong); transform: translateY(-4px); }
.awx .mag-card__media { aspect-ratio: 16/10; overflow: hidden; }
.awx .mag-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.awx .mag-card:hover .mag-card__media img { transform: scale(1.04); }
.awx .mag-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.awx .mag-card__body h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-20); line-height: 1.2; }
.awx .mag-card__body p { font-size: var(--fs-14); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 68%, var(--felsgestein)); line-height: 1.55; margin: 0; }
.awx .mag-card__more { margin-top: auto; font-size: var(--fs-13); color: var(--accent-text); }

/* ===================== SECTION: artikel (magazin-artikel) ===================== */
.awx .art-head { max-width: 860px; margin: 0 auto; padding-top: clamp(96px,12vh,140px); }
.awx .art-crumb { font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); margin-bottom: 18px; }
.awx .art-crumb a { color: var(--accent-text); text-decoration: none; }
.awx .art-head h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.2rem,5vw,5.44rem); line-height: 1.06; letter-spacing: -.025em; margin: 10px 0 18px; text-wrap: balance; }
.awx .art-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 58%, var(--felsgestein)); display: flex; gap: 16px; }
.awx .art-meta .cat { color: var(--accent-text); }
.awx .art-hero { margin: clamp(28px,5vw,52px) 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; }
.awx .art-hero img { width: 100%; height: 100%; object-fit: cover; }
.awx .art-body { max-width: 720px; margin: 0 auto; }
.awx .art-body h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem,2.8vw,3.36rem); letter-spacing: -.02em; margin: clamp(34px,5vw,52px) 0 14px; }
.awx .art-body p { color: color-mix(in oklch, var(--alpenlicht) 80%, var(--felsgestein)); font-weight: 400; font-size: var(--fs-18); line-height: 1.75; margin: 0 0 20px; }
.awx .art-body a.ml { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--bergsonne) 45%, transparent); }
.awx .art-body a.ml:hover { border-bottom-color: var(--bergsonne); }
.awx .art-pull { border-left: 2px solid var(--bergsonne); padding: 6px 0 6px 24px; margin: clamp(28px,4vw,40px) 0; }
.awx .art-pull p { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.08rem,2.4vw,2.72rem); line-height: 1.4; color: var(--alpenlicht); margin: 0; }
.awx .art-inline { border: 1px solid var(--bergsonne); border-radius: var(--radius-lg); padding: clamp(22px,3vw,32px); margin: clamp(32px,5vw,48px) 0; background: color-mix(in oklch, var(--bergsonne) 7%, var(--felsgestein)); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.awx .art-inline h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); margin: 0 0 4px; }
.awx .art-inline p { font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); margin: 0; font-weight: 400; }

/* ===================== SECTION: konfigurator-entry (Berg-LPs) ===================== */
.awx .zs-entry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: center; border: 1px solid var(--bergsonne); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in oklch, var(--bergsonne) 7%, var(--felsgestein)); }
/* Die Breite MUSS von der Spalte kommen, nicht aus dem Seitenverhaeltnis:
   `height:100%` uebernimmt die Hoehe der Textspalte, und `aspect-ratio` rechnet daraus
   eine BREITE — gemessen 538 px Hoehe x 4/3.4 = 633 px gegen eine 427-px-Spalte, also
   207 px Ueberhang in den Textblock (dessen padding-left 0 ist). Sichtbar als links
   angeschnittene Eyebrow/H2/Pills, je schmaler der Viewport desto schlimmer:
   6 px bei 1440, 156 px bei 1024, 185 px bei 900. `min-width:0` allein half nicht —
   es erlaubt Schrumpfen, verhindert aber die aspect-ratio-Breite nicht.
   Mit `width:100%` gewinnt die Spalte; `min-height:100%` haelt die Fuellhoehe. */
.awx .zs-entry__media { position: relative; aspect-ratio: 4/3.4; overflow: hidden; width: 100%; min-width: 0; min-height: 100%; }
.awx .zs-entry__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .zs-entry__badge { position: absolute; left: 16px; top: 16px; }
.awx .zs-entry__body { padding: clamp(24px,4vw,52px) clamp(24px,4vw,52px) clamp(24px,4vw,52px) 0; }
.awx .zs-entry__body h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.88rem,3.4vw,4.16rem); letter-spacing: -.02em; margin: 14px 0 14px; }
.awx .zs-entry__body p { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; margin: 0 0 22px; }
.awx .zs-entry__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
@media (max-width: 860px) { .awx .zs-entry { grid-template-columns: 1fr; } .awx .zs-entry__body { padding: clamp(20px,5vw,32px); } }

/* ===================== SECTION: video (NEU — Shopify-Video-Bibliothek) =====================
   Varianten: .vid (Karte) · .vid--full im .b-sec ohne wrap = Full-Band · .vid-split (Media+Copy)
   Poster = <image-slot> (Prototyp) bzw. poster-Attribut; Video-Datei via data-src / <source>. */
.awx .vid { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border-mid); background: #000; }
.awx .vid--full { border-radius: 0; border-inline: 0; }
.awx .vid__frame { position: relative; aspect-ratio: 16/9; }
.awx .vid--tall .vid__frame { aspect-ratio: 16/10; }
.awx .vid__frame > video, .awx .vid__frame > image-slot, .awx .vid__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awx .vid__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(30,30,28,.18) 0%, transparent 42%, rgba(30,30,28,.8) 100%); transition: opacity var(--dur-slow) var(--ease-out); }
.awx .vid__play { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer; background: color-mix(in srgb, var(--alpenlicht) 94%, transparent); color: var(--felsgestein); display: grid; place-items: center; box-shadow: var(--shadow-dark-lg); transition: opacity var(--dur-base), background var(--dur-base); }
.awx .vid__play svg { width: 26px; height: 26px; margin-left: 3px; }
.awx .vid__play:hover { background: var(--bergsonne); }
.awx .vid__play:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .vid__overlay { position: absolute; z-index: 3; left: clamp(18px,4vw,48px); right: clamp(18px,4vw,48px); bottom: clamp(18px,4vw,44px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; pointer-events: none; }
.awx .vid__overlay .eyebrow { color: var(--accent-text); }
.awx .vid__overlay h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem,3.2vw,4.16rem); letter-spacing: -.02em; margin: 10px 0 0; color: var(--alpenlicht); max-width: 22ch; }
.awx .vid__overlay p { margin: 8px 0 0; color: color-mix(in oklch, var(--alpenlicht) 78%, transparent); font-weight: 400; font-size: var(--fs-15); max-width: 52ch; }
.awx .vid__overlay .vid__cta { pointer-events: auto; }
.awx .vid__dur { position: absolute; z-index: 3; top: 14px; right: 14px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.72); backdrop-filter: blur(4px); padding: 5px 10px; border-radius: var(--radius-pill); pointer-events: none; }
.awx .vid__missing { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-on-accent); background: var(--bergsonne); padding: 7px 13px; border-radius: var(--radius-pill); white-space: nowrap; }
.awx .vid.is-playing .vid__play, .awx .vid.is-playing .vid__overlay, .awx .vid.is-playing .vid__scrim, .awx .vid.is-playing .vid__dur { opacity: 0; pointer-events: none; }
.awx .vid__note { margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); }
.awx .vid-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 860px) { .awx .vid-split { grid-template-columns: 1fr; } }
.awx .vid-split__copy h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.72rem,3.4vw,4.16rem); letter-spacing: -.02em; margin: 14px 0 0; }
.awx .vid-split__copy p { color: var(--fg-muted); font-weight: 400; margin: 14px 0 0; max-width: 46ch; }

/* ===================== SECTION: col-tiles (NEU — Collection-Teaser-Kacheln) ===================== */
.awx .ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.awx .ct-grid--2 { grid-template-columns: repeat(2, 1fr); }
.awx .ct-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .awx .ct-grid, .awx .ct-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .awx .ct-grid, .awx .ct-grid--2, .awx .ct-grid--4 { grid-template-columns: 1fr; } .awx .ct--wide { grid-column: auto; } }
.awx .ct { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4/4.4; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-mid); text-decoration: none; color: var(--alpenlicht); background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base) var(--ease-out); }
.awx .ct:hover { border-color: var(--bergsonne); }
.awx .ct:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }
.awx .ct--wide { grid-column: span 2; aspect-ratio: 8/4.4; }
.awx .ct > img, .awx .ct > image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.awx .ct:hover > img { transform: scale(1.04); }
.awx .ct::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(30,30,28,.85) 100%); pointer-events: none; }
.awx .ct__body { position: relative; z-index: 2; padding: 22px 22px 20px; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.awx .ct__kicker { font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent-text); display: block; margin-bottom: 6px; }
.awx .ct__name { font-family: var(--font-serif); font-size: clamp(2.16rem,2vw,2.8rem); letter-spacing: -.02em; line-height: 1.05; }
.awx .ct__count { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 62%, transparent); }
.awx .ct__go { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-mid-strong); display: grid; place-items: center; color: var(--alpenlicht); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.awx .ct:hover .ct__go { background: var(--bergsonne); color: var(--aw-on-accent); border-color: transparent; }
.awx .ct__go svg { width: 18px; height: 18px; }

/* ===================== SECTION: evt-hero (NEU — emotionaler Event-Einstieg) ===================== */
.awx .evt-hero { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--felsgestein); }
.awx .evt-hero__bg { position: absolute; inset: 0; z-index: 0; }
.awx .evt-hero__bg image-slot, .awx .evt-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awx .evt-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(30,30,28,.5) 0%, rgba(30,30,28,.12) 38%, rgba(30,30,28,.88) 86%, var(--felsgestein) 100%); }
.awx .evt-hero__in { position: relative; z-index: 2; width: 100%; padding-block: 140px clamp(40px,7vh,80px); }
.awx .evt-hero h1 { font-size: var(--fs-display-lg); line-height: .95; letter-spacing: -.03em; margin: 16px 0 0; max-width: 18ch; }
.awx .evt-hero p.lead { font-size: clamp(1.68rem,1.7vw,2.08rem); font-weight: 400; color: color-mix(in oklch, var(--alpenlicht) 84%, var(--felsgestein)); max-width: 52ch; }
.awx .evt-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 30px; }
.awx .evt-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.awx .evt-facts { display: flex; flex-wrap: wrap; gap: 8px 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); margin-top: 26px; }
.awx .evt-facts .sep { color: var(--accent-text); margin: 0 12px; }

/* ===================== SECTION: evt-profile (NEU — Streckenprofil als Grafik) ===================== */
.awx .evt-profile { position: relative; border: 1px solid var(--border-mid); border-radius: var(--radius-xl); padding: clamp(20px,3vw,36px) clamp(20px,3vw,36px) clamp(14px,2vw,24px); background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); overflow: hidden; }
.awx .evt-profile svg { width: 100%; height: auto; display: block; }
.awx .evt-profile__line { fill: none; stroke: var(--bergsonne); stroke-width: 2; stroke-linejoin: round; }
.awx .evt-profile__grid line { stroke: var(--border-mid); stroke-width: 1; }
.awx .evt-profile text { font-family: var(--font-mono); font-size: 11px; fill: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
.awx .evt-profile text.pk { fill: var(--alpenlicht); }
.awx .evt-profile__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); }
.awx .evt-profile__meta b { color: var(--accent-text); font-weight: 500; }

/* ===================== SECTION: evt-dist (NEU — Distanz-Wahl) ===================== */
.awx .evt-dist { display: flex; flex-wrap: wrap; gap: 10px; }
.awx .evt-dist button { min-height: 46px; padding: 10px 16px; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-md); background: transparent; color: var(--alpenlicht); font: inherit; font-size: var(--fs-14); font-weight: 500; cursor: pointer; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base); }
.awx .evt-dist button small { font-size: var(--fs-12); color: var(--fg-muted); font-weight: 400; }
.awx .evt-dist button:hover { border-color: color-mix(in oklch, var(--alpenlicht) 40%, transparent); }
.awx .evt-dist button[aria-pressed="true"] { border-color: var(--bergsonne); box-shadow: inset 0 0 0 1px var(--bergsonne); background: var(--aw-accent-wash-soft); }
.awx .evt-dist button[aria-pressed="true"] small { color: var(--accent-text); }
.awx .evt-dist button:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }

/* ===================== SECTION: evt-quotes (NEU — große Finisher-Zitate) ===================== */
.awx .evt-quotes { display: grid; }
.awx .evt-quote { border-top: 1px solid var(--border-mid); padding: clamp(28px,4vw,48px) 0; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,3vw,40px); }
.awx .evt-quote:last-child { border-bottom: 1px solid var(--border-mid); }
.awx .evt-quote__mark { font-family: var(--font-serif); font-size: clamp(4.16rem,5vw,6.4rem); line-height: .8; color: var(--accent-text); }
.awx .evt-quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(2.16rem,2.6vw,3.2rem); line-height: 1.3; color: var(--alpenlicht); max-width: 44ch; }
.awx .evt-quote__who { margin-top: 14px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); display: flex; align-items: center; gap: 12px; }
.awx .evt-quote__who .stars { color: var(--aw-star); letter-spacing: 2px; } /* v19.07: Sterne IMMER Amazon-Gold */
@media (max-width: 640px) { .awx .evt-quote { grid-template-columns: 1fr; gap: 10px; } .awx .evt-quote__mark { font-size: 3.2rem; } }

/* CHIP-TEXT AUF DUNKLEM GRUND: immer --aw-ci-alpenlicht, nie --alpenlicht.
   --alpenlicht TAUSCHT in der hellen Farbwelt auf #1E1E1C — auf einem festen dunklen
   Chip (rgba(30,30,28,.72)) steht dann dunkel auf dunkel. Live gemessen am 11.08.2026
   auf /pages/lp-natural: Kontrast 1.00:1, die Bildunterschriften waren unsichtbar.
   Der v4.72-Fix vom 12.07. (#fff -> var(--alpenlicht)) hat den Fehler eingebaut, weil
   damals nur in der dunklen Welt geprueft wurde. Merksatz aus dem Memory:
   --felsgestein/--alpenlicht sind themenabhaengig, --aw-ci-* nicht. */
/* ===================== SECTION: evt-shots (NEU — Emotion-Galerie, Bild-Slots) ===================== */
.awx .evt-shots { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.awx .evt-shots figure { margin: 0; position: relative; }
.awx .evt-shots image-slot { width: 100%; height: 100%; min-height: 280px; display: block; }
.awx .evt-shots figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 3; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.72); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: var(--radius-pill); pointer-events: none; } /* v4.72: #fff → var(--alpenlicht) (Audit 12.07.2026) */
@media (max-width: 860px) { .awx .evt-shots { grid-template-columns: 1fr; } .awx .evt-shots image-slot { min-height: 220px; } }

/* ===================== SECTION: pdp-gallery (NEU — Standard-PDP Bildergalerie) ===================== */
/* v6.117 (Stephan 29.07.: „warum schneidest du das gallery bild zu?"): Der feste
   4/3.6-Rahmen mit object-fit:cover schnitt jedes Bild zurecht, das nicht genau dieses
   Verhaeltnis hat — bei den Infografiken (Holzart-/Groessen-Tafeln) flogen Beschriftung
   und Rand raus. In einer PRODUKTGALERIE ist Beschnitt immer der falsche Kompromiss:
   der Kunde soll das ganze Bild sehen. Also contain + Grund aus dem Token (das harte
   #000 war ausserdem die einzige Nicht-Token-Farbe hier und stach im hellen Theme). */
.awx .pdp-gal__main { position: relative; aspect-ratio: 4/3.6; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-mid); background: var(--bg-subtle); box-shadow: var(--shadow-dark-xl); }
.awx .pdp-gal__main img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity var(--dur-fast) var(--ease-out); }
.awx .pdp-gal__main.is-fading img { opacity: .25; }
.awx .pdp-gal__badge { position: absolute; left: 14px; top: 14px; z-index: 2; }
.awx .pdp-gal__thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.awx .pdp-gal__thumbs::-webkit-scrollbar { display: none; }
.awx .pdp-gal__thumbs button { flex: none; width: 76px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-mid); padding: 0; background: none; cursor: pointer; opacity: .55; transition: opacity var(--dur-base), border-color var(--dur-base); }
.awx .pdp-gal__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awx .pdp-gal__thumbs button:hover { opacity: .85; }
.awx .pdp-gal__thumbs button.is-act { opacity: 1; border-color: var(--bergsonne); }
.awx .pdp-gal__thumbs button:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .pdp-gal__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); }

/* ===================== SECTION: opt-explain (NEU — Optionen erklären: Base/Wall, Holz …) =====================
   Lebt IM Cockpit (light panel) — semantische Tokens folgen [data-theme]. Karte wählt die Option mit. */
.awx .opt-explain-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-13); color: var(--felsgestein-55); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--steinlicht); }
.awx .opt-explain-link:hover { color: var(--felsgestein); }
.awx .opt-explain-link svg { width: 15px; height: 15px; flex: none; }
.awx .opt-explain-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.awx .opt-explain { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.awx .opt-explain.is-open { display: grid; }
@media (max-width: 420px) { .awx .opt-explain { grid-template-columns: 1fr; } }
.awx .opt-explain__card { border: 1px solid var(--steinlicht); border-radius: var(--radius-md); overflow: hidden; background: var(--alpenlicht); cursor: pointer; text-align: left; padding: 0; font: inherit; color: var(--felsgestein); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.awx .opt-explain__card:hover { border-color: var(--felsgestein); }
.awx .opt-explain__card.is-act { border-color: var(--felsgestein); box-shadow: inset 0 0 0 2px var(--bergsonne); }
.awx .opt-explain__card:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .opt-explain__media { display: block; position: relative; aspect-ratio: 16/10; background: var(--steinlicht-40); }
.awx .opt-explain__media img, .awx .opt-explain__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awx .opt-explain__body { display: block; padding: 10px 12px 12px; }
.awx .opt-explain__body b { display: block; font-size: var(--fs-14); font-weight: 500; color: var(--felsgestein); }
.awx .opt-explain__body small { display: block; margin-top: 2px; color: var(--felsgestein-55); font-size: var(--fs-12); line-height: 1.45; }

/* Standard-Buybox: Menge + Warenkorb in einer Zeile (helles Cockpit) */
.awx .ck-buyrow { display: flex; align-items: stretch; gap: 10px; }
.awx .cockpit .qty { border-color: var(--border-strong); align-self: center; }
.awx .cockpit .qty button { color: var(--felsgestein); width: 38px; height: 44px; }
.awx .cockpit .qty span { min-width: 30px; font-size: var(--fs-15); }

/* ===================== FIX: Topo-Layer global (Seiten ohne kit.css) =====================
   Signatur-Höhenlinien: Linien statt schwarzer Füllflächen — gilt für ALLE [data-aw-topo]-Hosts
   (.aw-topo, .aw-peak__topo, .aw-depth …). Dupliziert bewusst kit.css (harmlos). */
.awx .aw-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.awx .aw-topo svg { width: 100%; height: 100%; display: block; }
.awx [data-aw-topo] { pointer-events: none; }
.awx [data-aw-topo] svg { width: 100%; height: 100%; display: block; }
.awx [data-aw-topo] path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }

/* ===================== FIX: lp-hero unter fixem Chrome-Header ===================== */
@media (min-width: 861px) {
  .awx .lp-hero__in { padding-top: clamp(96px, 11vh, 128px); padding-bottom: clamp(24px, 4vh, 48px); }
}
/* Berg-Variante: längere Namen, kompaktere H1, breitere Spalte */
.awx .lp-hero--berg .lp-hero__col { max-width: 46ch; }
.awx .lp-hero--berg h1 { font-size: clamp(3.68rem, 4.8vw, 6.4rem); }
.awx .lp-hero__facts .f { white-space: nowrap; }

/* lp-hero Content-Seiten-Variante — Mindesthoehe nur Desktop.
   v19.07: 64svh leakte per Source-Order in die Stacked-Mobile-Ansicht (gleiche Specificity wie
   .lp-hero{min-height:0}, aber spaeter) und liess unter kurzen Content-Heroes (z.B. FAQ) ein
   Leerband am Hero-Fuss. Mobil hugt der Hero jetzt seinen Content wie die Basis-Variante. */
@media (min-width: 861px) { .awx .lp-hero--page { min-height: 64vh; min-height: 64svh; } }

/* ===================== SECTION: hotspots (NEU — Bild mit +-Punkten) ===================== */
.awx .hs { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-mid); background: var(--felsgestein); }
.awx .hs > img, .awx .hs > image-slot { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.awx .hs--43 > img, .awx .hs--43 > image-slot { aspect-ratio: 4/3; }
.awx .hs__dot { position: absolute; z-index: 3; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(255,251,247,.45); background: color-mix(in oklch, var(--felsgestein) 55%, transparent); backdrop-filter: blur(5px); color: var(--alpenlicht); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background var(--dur-base), color var(--dur-base); }
.awx .hs__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--bergsonne) 55%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .awx .hs__dot::after { animation: hsPulse 2.6s ease-out infinite; } }
@keyframes hsPulse { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } }
.awx .hs__dot svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.awx .hs__dot:hover { background: color-mix(in oklch, var(--felsgestein) 78%, transparent); }
.awx .hs__dot[aria-expanded="true"] { background: var(--bergsonne); color: var(--aw-on-accent); border-color: var(--bergsonne); }
.awx .hs__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }
.awx .hs__dot[aria-expanded="true"] svg { transform: rotate(45deg); }
.awx .hs__dot:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .hs__card { position: absolute; z-index: 4; width: min(300px, 76vw); background: var(--alpenlicht); color: var(--felsgestein); border-radius: var(--radius-md); padding: 14px 16px 15px; box-shadow: var(--shadow-dark-lg); transform: translate(-50%, 14px); }
.awx .hs__card[hidden] { display: none; }
.awx .hs__card b { display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-14); }
.awx .hs__card p { margin: 4px 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--felsgestein-70); }
.awx .hs__cap { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.72); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: var(--radius-pill); pointer-events: none; } /* v4.72: #fff → var(--alpenlicht) (Audit 12.07.2026) */

/* ===================== SECTION: cmp-table (NEU — Linien-Vergleich) ===================== */
.awx .cmpt { border: 1px solid var(--border-mid); border-radius: var(--radius-xl); overflow: hidden; }
.awx .cmpt__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.awx .cmpt table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-14); }
.awx .cmpt th, .awx .cmpt td { padding: 13px 18px; border-top: 1px solid var(--border-mid); text-align: left; vertical-align: top; font-weight: 400; }
.awx .cmpt thead th { border-top: 0; font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-18); padding-top: 18px; }
.awx .cmpt thead th small { display: block; font-family: var(--font-sans); font-size: var(--fs-12); color: var(--fg-muted); font-weight: 400; margin-top: 4px; }
.awx .cmpt tbody th { font-family: var(--font-sans); font-weight: 400; color: var(--fg-muted); width: 190px; font-size: var(--fs-13); }
.awx .cmpt td { font-variant-numeric: tabular-nums; color: color-mix(in oklch, var(--alpenlicht) 88%, var(--felsgestein)); }
.awx .cmpt .y { color: var(--accent-text); }
.awx .cmpt .n { color: var(--fg-faint); }
.awx .cmpt .col-feat { background: color-mix(in oklch, var(--bergsonne) 7%, transparent); }
.awx .cmpt tfoot td { padding: 16px 18px 18px; }

/* ===================== SECTION: ship-eta (NEU — ehrliches Lieferfenster) ===================== */
.awx .ship-eta { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: var(--fg-muted); }
.awx .ship-eta svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.awx .ship-eta b { font-weight: 500; color: var(--alpenlicht); }
.awx .cockpit .ship-eta { color: var(--felsgestein-55); margin-top: 12px; }
.awx .cockpit .ship-eta b { color: var(--felsgestein); }
.awx .cockpit .ship-eta svg { color: var(--bergsonne-dark); }

/* ===================== SECTION: newsletter (NEU) ===================== */
/* v4.73 Mix (Stephan 13.07.): Panel-Grund auf den SEMANTISCHEN, warmen Steinlicht-Token
   (--bg-subtle) statt der alpenlicht/felsgestein-Mischung. Die war dark-first gedacht und
   kippte im Hell-Modus zu einem neutral-KUEHLEN Fast-Weiss (oklch chroma ~0) — neben dem
   warmen Alpenlicht-Grund las das Auge das als Lila (Simultankontrast, off-CI). --bg-subtle
   ist in beiden Welten korrekt (warmes Off-White hell / dunkles Panel dunkel). */
.awx .nl { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(26px,4vw,48px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px,4vw,48px); align-items: center; background: color-mix(in srgb, var(--alpenlicht) 5%, var(--felsgestein)); }
@media (max-width: 860px) { .awx .nl { grid-template-columns: 1fr; } }
.awx .nl h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.24rem,2.6vw,3.2rem); letter-spacing: -.02em; margin: 10px 0 0; }
.awx .nl > div > p { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-14); margin: 10px 0 0; max-width: 46ch; }
.awx .nl form { display: flex; gap: 10px; flex-wrap: wrap; }
.awx .nl input[type="email"] { flex: 1 1 220px; padding: 14px 16px; font: inherit; font-size: var(--fs-15); color: var(--alpenlicht); background: var(--felsgestein); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-md); }
.awx .nl input[type="email"]:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .nl__note { font-size: var(--fs-12); color: var(--fg-faint); margin: 10px 0 0; flex-basis: 100%; }
.awx .nl__ok { font-size: var(--fs-15); color: var(--accent-text); }

/* ===================== INTERN: Widget-Bibliothek Split-Ansicht (nur widgets.html) ===================== */
.awx .lib-split { display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1100px) { .awx .lib-split { grid-template-columns: 1fr; } .awx .lib-phone { max-width: 404px; } }
.awx .lib-main { min-width: 0; }
.awx .lib-phone { border: 1px solid var(--border-mid); border-radius: 22px; overflow: hidden; background: var(--felsgestein); }
.awx .lib-phone__bar { display: flex; justify-content: space-between; padding: 10px 14px; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg-muted); border-bottom: 1px solid var(--border-mid); }
.awx .lib-phone iframe { display: block; width: 100%; height: 600px; border: 0; background: var(--felsgestein); }
.awx .lib-demo-pad { padding: 18px 16px 28px; }

/* ===================== SECTION: lieferzeit (arrivesby optimiert) ===================== */
.awx .eta-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 28px); }
.awx .eta-phase { text-align: center; position: relative; min-width: 0; }
.awx .eta-phase::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 1px; background: var(--border-mid); }
.awx .eta-phase:first-child::before { display: none; }
.awx .eta-phase i { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; background: var(--aw-accent-wash); display: inline-grid; place-items: center; color: var(--accent-text); }
.awx .eta-phase i svg { width: 18px; height: 18px; }
.awx .eta-phase b { display: block; margin-top: 10px; font-weight: 500; font-size: var(--fs-14); }
.awx .eta-phase small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); }
@media (max-width: 560px) { .awx .eta-phase b { font-size: var(--fs-12); } .awx .eta-phase small { font-size: var(--fs-11); } }

/* ===================== SECTION: versand-rechner (.ship-est, Warenkorb) ===================== */
.awx .ship-est { border-top: 1px solid var(--border-mid); margin-top: 18px; padding-top: 16px; display: grid; gap: 8px; font-size: var(--fs-13); }
.awx .ship-est label { color: color-mix(in oklch, var(--alpenlicht) 62%, var(--felsgestein)); }
.awx .ship-est select { width: 100%; padding: 10px 12px; background: var(--felsgestein); color: var(--alpenlicht); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-14); }
.awx .ship-est select:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .ship-est__row { display: flex; justify-content: space-between; align-items: baseline; color: color-mix(in oklch, var(--alpenlicht) 80%, var(--felsgestein)); }
.awx .ship-est__row b { font-weight: 500; }
.awx .ship-est__row b.free { color: var(--accent-text); }
.awx .ship-est small { color: color-mix(in oklch, var(--alpenlicht) 52%, var(--felsgestein)); font-size: var(--fs-12); }


/* ===================== SECTION: lp-spotlight (Home-Spotlight-Headline — Basis, kein Inline-Style) ===================== */
.awx .lp-spotlight { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2-split); line-height: 1.06; letter-spacing: -.025em; margin: 16px 0 18px; text-wrap: balance; }
.awx .lp-spotlight em { font-style: italic; color: var(--fg-muted); }

/* ===================== SECTION: b-sizescale (Größenmaßstab gegen Größenangst — Dock + PDP) =====================
   Token-getrieben (funktioniert dunkel UND im hellen Cockpit). Referenz: DIN A4 + Handbreite.
   Markup: <div class="b-sizescale" data-sizescale> <div class="b-sizescale__row">
     <span class="b-sizescale__ref b-sizescale__ref--a4">DIN A4</span>
     <button class="b-sizescale__box" data-size="S" style="--w:32px">…
   Sync: sections.js markiert .is-act nach Größenwahl. */
.awx .b-sizescale { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 14px 10px; background: color-mix(in oklch, var(--fg) 3%, transparent); }
.awx .b-sizescale__row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.awx .b-sizescale__box { position: relative; flex: none; width: var(--w); height: var(--w); border: 1px dashed var(--border-strong); border-radius: 3px; background: transparent; padding: 0; cursor: pointer; color: var(--fg-faint); font: inherit; display: grid; place-items: center; transition: border-color var(--dur-base), color var(--dur-base), background var(--dur-base); }
.awx .b-sizescale__box b { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: .02em; color: inherit; }
.awx .b-sizescale__box.is-act { border-style: solid; border-color: var(--accent-text); color: var(--fg); background: color-mix(in oklch, var(--bergsonne) 14%, transparent); }
.awx .b-sizescale__box:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .b-sizescale__ref { flex: none; display: grid; place-items: end center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 2px; padding-bottom: 3px; }
.awx .b-sizescale__ref--a4 { width: 67px; height: 95px; }
.awx .b-sizescale__ref--hand { width: 27px; height: 58px; border-style: dotted; }
.awx .b-sizescale__note { margin: 10px 0 0; font-size: var(--fs-12); color: var(--fg-subtle); }
.awx .b-sizescale__note b { font-weight: 500; color: var(--fg-muted); }
@media (max-width: 480px) { .awx .b-sizescale__row { gap: 7px; } .awx .b-sizescale__ref--a4 { width: 54px; height: 76px; } }

/* Marquee-Set (statt style="display:contents") */
.awx .aw-set { display: contents; }

/* Fokus-Ringe für Peak-Kacheln (N11) */
.awx .aw-peak:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }

/* Eyebrow-Akzent als Klasse (statt Inline-Style) */
.awx .eyebrow--accent { color: var(--accent-text); }

/* ===================== SECTION: cart-empty (leerer Warenkorb) ===================== */
.awx .cart-empty { text-align: center; padding: clamp(40px, 8vw, 96px) 20px; border: 1px solid var(--border-mid); border-radius: var(--radius-xl); }
.awx .cart-empty svg { width: 44px; height: 44px; color: var(--accent-text); margin-bottom: 18px; }
.awx .cart-empty h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-32); margin: 0 0 10px; }
.awx .cart-empty p { color: var(--fg-muted); font-weight: 400; margin: 0 auto 26px; max-width: 44ch; }
.awx .cart-empty__peaks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.awx .cart-empty__peaks a { font-size: var(--fs-13); color: var(--fg-muted); border: 1px solid var(--border-mid); border-radius: var(--radius-pill); padding: 8px 14px; text-decoration: none; transition: border-color var(--dur-base), color var(--dur-base); }
.awx .cart-empty__peaks a:hover { border-color: var(--bergsonne); color: var(--fg); }

/* Undo-Snackbar (Entfernen im Warenkorb) */
.awx .cart-snack { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 60; display: flex; align-items: center; gap: 14px; background: var(--alpenlicht); color: var(--felsgestein); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); font-size: var(--fs-14); }
.awx .cart-snack.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.awx .cart-snack button { background: none; border: 0; font: inherit; font-weight: 600; color: var(--felsgestein); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }

/* Cross-Sell-Karten als Links (Preis sichtbar) */
.awx a.xs__card { text-decoration: none; color: inherit; transition: border-color var(--dur-base); }
.awx a.xs__card:hover { border-color: var(--border-mid-strong); }
.awx .xs__price { margin-left: auto; white-space: nowrap; font-family: var(--font-serif); font-size: var(--fs-16); }
.awx .xs__go { color: var(--accent-text); font-size: var(--fs-16); margin-left: 6px; }


/* ===================== Migration-Aliase (aw-* -> Kanon) ===================== */
.awx .b-sec--tight { padding-block: clamp(40px, 6vw, 72px); }
.awx .b-sec--strip { padding-block: clamp(20px, 2.5vw, 32px); } /* v2.10: einzeilige Leisten (Trust-Pills) — kein Monument-Padding */
/* Nach einer Strip-Leiste halbiert die Folge-Section ihr Top-Padding — sonst doppelte Luft */
.awx .shopify-section:has(.b-sec--strip) + .shopify-section .b-sec { padding-top: clamp(28px, 4.5vw, 56px); }
.awx .b-cta-band { text-align: center; }
.awx .b-cta-band h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2-split); letter-spacing: -.02em; margin-bottom: 10px; }
.awx .b-cta-band h2 em { font-style: italic; color: var(--fg-muted); }
.awx .b-cta-band p { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-18); margin: 0 auto 28px; max-width: 50ch; }
.awx .b-faq--single { grid-template-columns: 1fr; max-width: 820px; }
.awx .lp-card--feat { border-color: var(--bergsonne); }
.awx .lp-card__kicker { font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-faint); }
.awx .trust-strip--center { justify-content: center; }
/* v6.119: Alpenholz pur auf Creme sind 2.96:1 bei 11 px — die „№ 01"-Nummerierung war
   damit die schwaechste Textstelle im ganzen Theme (Zielgruppe 50+). Holzton bleibt,
   wird aber Richtung Vordergrund abgedunkelt und folgt so beiden Farbwelten. */
.awx .eyebrow .n { font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--wood) 45%, var(--fg)); letter-spacing: .04em; }
/* b-story: Media auch als <div class="b-story__media"> (mit Parallax), Copy auch ohne .b-story__copy */
.awx .b-story .b-story__media { margin: 0; position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-mid); box-shadow: var(--shadow-dark-xl); }
.awx .b-story .b-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.awx .b-story--rev .b-story__media { order: 2; }
@media (max-width: 860px) { .awx .b-story--rev .b-story__media { order: 0; } }
/* v6.119: Die Pille liegt auf einem FIXEN dunklen Scrim (rgba(30,30,28,.72)) ueber dem
   Foto — --alpenlicht ist im Light aber DUNKEL, gemessen 4.01:1. Hier gehoert der nicht
   tauschbare Rohwert hin (gleiche Klasse wie Preise 28.07. / Badge oben). */
.awx .b-story__cap { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--aw-ci-alpenlicht, #FFFBF7); background: rgba(30,30,28,.72); backdrop-filter: blur(4px); padding: 6px 11px; border-radius: var(--radius-pill); }
.awx .b-story > div:not(.b-story__media) h2, .awx .b-story > div:not(.b-story__media) h3 { font-size: var(--fs-h2-split); letter-spacing: -.025em; margin-top: 14px; }
.awx .b-story > div:not(.b-story__media) > p { color: var(--fg-muted); font-weight: 400; margin-top: 16px; max-width: 52ch; }
.awx .b-story > div:not(.b-story__media) .btn { margin-top: 24px; }

/* image-slot in UGC-Galerie + Berg-Story (Kundenfotos folgen) */
.awx .aw-ugc__item image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.awx .aw-bstory__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Utility: weicher Fließtext (statt Inline-Styles) */
.awx .text-soft { color: var(--fg-muted); font-weight: 400; }
/* SVG-Sterne (einheitliches Rendering statt OS-Unicode) */
.awx .svg-stars { display: inline-flex; gap: 2px; align-items: center; }
.awx .svg-stars svg { width: 14px; height: 14px; flex: none; }

/* Deko-Layer clippen — Drift/Parallax darf nie horizontales Scrollen erzeugen */
.awx [data-aw-topo] { overflow: hidden; }
.awx .aw-topo, .awx .awc-foot__depth { overflow: hidden; }

/* PDP-Optionen: unter 520px umbrechen (5 Chips passen nicht nebeneinander) */
@media (max-width: 520px) {
  .awx .cockpit .opt-row { flex-wrap: wrap; }
  .awx .cockpit .opt--grow { flex: 1 1 30%; }
}

/* ===== QA-Sweep 05.07.2026: Mobile-Overflow-Fixes ===== */
/* Sizescale: Reihe darf umbrechen — 5 Boxen + DIN-A4-Referenz passen nicht in 350px */
@media (max-width: 560px) {
  .awx .b-sizescale__row { flex-wrap: wrap; row-gap: 12px; }
}
/* Reviews: mobil einspaltig (min-content der Karten sprengte 390px) */
@media (max-width: 860px) {
  .awx .b-revs { grid-template-columns: 1fr; }
}
/* Warenkorb-Zeile: mobil stapeln — Preis unter den Inhalt statt dritter Spalte */
@media (max-width: 560px) {
  /* v4.53: Warenkorb mobil KOMPAKT — alles auf einen Blick (Stephan 12.07.) */
  .awx .ci { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .awx .ci__media { width: 56px; height: 56px; } /* v4.51: fixe 96px ragten unter den Titel */
  .awx .ci__name { font-size: var(--fs-16); line-height: 1.25; }
  .awx .ci__line { font-size: var(--fs-12); }
  .awx .ci__prop { font-size: 11px; padding: 3px 8px; }
  .awx .ci__props { gap: 5px; margin-top: 6px; }
  .awx .ci__price { grid-column: 2; text-align: left; margin-top: 4px; font-size: var(--fs-18); }
  .awx .ci__actions { margin-top: 8px; gap: 10px; }
  .awx .qty button { width: 26px; height: 26px; font-size: 14px; }
  .awx .qty .quantity__input { width: 28px; }
  .awx .ci .ci__upg { display: inline-block; line-height: 1.45; font-size: var(--fs-12); padding: 6px 10px; } /* v4.51: inline-flex brach '(+ 20,00 €)' hässlich um (Spezifität > Basisregel Z.1789) */
  .awx .ci__child { padding: 7px 10px; font-size: var(--fs-12); gap: 8px; }
  .awx .ci--engrave { padding: 14px 0; }
  .awx .ci--engrave .ci__ico { width: 34px; height: 34px; }
  .awx .ci--engrave .ci__name { font-size: var(--fs-14); }
  .awx .ci__engrave { font-size: var(--fs-13); }
  .awx .cart-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Display-/Section-Headlines NICHT auto-trennen (v2.3 P2: "AN-FAS-SEN." / "FERTI-GEN"
   sahen kaputt aus). Overflow langer Einzelwoerter faengt overflow-wrap ab (ohne Trennstrich).
   hyphens:auto bleibt fuer Fliesstext/Legal — siehe v2.3-Block am Dateiende. */
.awx.b h1, .awx.b h2 { hyphens: manual; overflow-wrap: normal; word-break: normal; } /* v2.10: NIE im Wort brechen — Ueberbreite faengt das Fit-JS (awFitHeadlines) */
/* Kleine Headlines: Trennstrich statt hartem Break — und `overflow-wrap: normal` ist der
   entscheidende Teil. Mit `break-word` bricht der Browser MITTEN IM WORT, bevor die
   Silbentrennung ueberhaupt zum Zug kommt: "QUALITAETSVERSPRECHE / N" (live gemessen).
   Ohne break-word passt dasselbe Wort in EINE Zeile (29 statt 58 px), und wo es wirklich
   zu breit wird, trennt `hyphens: auto` sauber mit Bindestrich (lang="de" steht am <html>).
   Gilt fuer alle langen deutschen Komposita, nicht nur fuer dieses eine Wort. */
.awx.b h3 { hyphens: auto; overflow-wrap: normal; }

/* Cockpit-Farbwahl (PDP): Swatch-Buttons, hell (Cockpit ist Light-Insel) */
.awx .ck-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.awx .ck-swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: var(--fs-13); color: var(--fg-muted); cursor: pointer; transition: border-color var(--dur-base), color var(--dur-base); }
.awx .ck-swatch:hover { border-color: var(--border-strong); color: var(--fg); }
.awx .ck-swatch[aria-pressed="true"] { border-color: var(--accent-text); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent-text); }
.awx .ck-swatch:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .ck-swatch .dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--sw); flex: none; }
.awx .ck-swatch .duo { position: relative; width: 22px; height: 18px; flex: none; }
.awx .ck-swatch .duo i { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); }
.awx .ck-swatch .duo i:first-child { left: 0; background: var(--rf); }
.awx .ck-swatch .duo i:last-child { left: 8px; background: var(--tf); z-index: 1; }
.awx .ck-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-13); }
.awx .ck-fact:last-child { border-bottom: 0; }
.awx .ck-fact b { font-weight: 500; }

/* === v1.1 — srch (Suche: Form/Results/Zustände; aus suche.html-<style> übernommen,
   Inline-Styles der Seite als Klassen aufgelöst — E11) === */
.awx .b-sec--pagehead { padding-top: clamp(110px, 14vh, 160px); }
.awx .srch-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.2rem, 4vw, 4.48rem); margin: 12px 0 22px; }
.awx .srch-form { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-pill); padding: 14px 22px; max-width: 640px; }
.awx .srch-form:focus-within { border-color: var(--bergsonne); }
.awx .srch-form input { flex: 1; background: none; border: 0; color: var(--alpenlicht); font-family: var(--font-sans); font-size: var(--fs-16); }
.awx .srch-form input:focus-visible { outline: none; }
.awx .srch-label { display: block; font-size: var(--fs-13); color: var(--fg-muted); margin: 0 0 10px; }
.awx .srch-results { max-width: 640px; margin-top: 14px; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; }
.awx .srch-results[hidden] { display: none; }
.awx .srch-hit { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: var(--alpenlicht); border-top: 1px solid var(--border-mid); transition: background var(--dur-fast); }
.awx .srch-hit:first-child { border-top: 0; }
.awx .srch-hit:hover, .awx .srch-hit.is-act { background: color-mix(in srgb, var(--alpenlicht) 5%, transparent); }
.awx .srch-hit:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: -2px; }
.awx .srch-hit__kind { flex: none; font-family: var(--font-mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); width: 64px; }
.awx .srch-hit__name { font-family: var(--font-serif); font-size: var(--fs-18); }
.awx .srch-hit__meta { margin-left: auto; font-size: var(--fs-12); color: var(--fg-faint); white-space: nowrap; }
.awx .srch-empty { padding: 22px 18px; color: var(--fg-muted); font-size: var(--fs-14); }
.awx .srch-empty a { color: var(--alpenlicht); }
.awx .srch-state { max-width: 640px; margin-top: 10px; font-size: var(--fs-12); color: var(--fg-faint); }
.awx .srch-pop { color: var(--fg-muted); margin-top: 14px; font-size: var(--fs-14); }
.awx .srch-quick { margin-top: clamp(40px, 6vw, 60px); }
.awx .srch-more { display: flex; gap: 12px; margin-top: 18px; }

/* === v1.2 — acct (Konto-Login-Karte aus konto.html; 8 Inline-Styles als Klassen — E11).
   #recover/#login-Umschaltung via :target (Funktions-Vorbild Dawn customers/login). === */
.awx .acct-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(3.2rem, 4vw, 4.16rem); margin: 12px 0 26px; }
.awx .acct-card { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); }
.awx .acct-card--guest { margin-top: 18px; }
.awx .acct-card__h { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); margin: 0 0 10px; }
.awx .acct-hint { color: var(--fg-muted); font-size: var(--fs-14); margin: 0 0 16px; }
.awx .acct-form { display: flex; flex-direction: column; gap: 14px; }
.awx .acct-label { font-size: var(--fs-13); font-weight: 500; }
.awx .acct-input { display: block; width: 100%; margin-top: 7px; padding: 13px 15px; background: var(--felsgestein); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); color: var(--alpenlicht); font: inherit; font-size: var(--fs-15); }
.awx .acct-input:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .acct-submit { margin-top: 6px; }
.awx .acct-forgot { font-size: var(--fs-13); }
.awx .acct-cancel { margin-top: 4px; }
.awx .acct-foot { text-align: center; margin-top: 18px; font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 64%, var(--felsgestein)); }
.awx .acct-msg { border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); padding: 10px 14px; font-size: var(--fs-14); margin-bottom: 14px; }
.awx .acct-msg a { color: var(--alpenlicht); }
.awx .acct-msg--ok { color: var(--accent-text); border-color: var(--accent-text); }
.awx .acct-recover { display: none; }
.awx .acct-recover:target { display: block; }
.awx .acct-recover:target ~ #login { display: none; }

/* === v1.3 — err404 (404-Center-Hero aus 404.html; 6 Inline-Styles als Klassen — E11) === */
.awx .err-hero { min-height: 80svh; display: grid; place-items: center; text-align: center; }
.awx .err-hero .eyebrow { justify-content: center; }
.awx .err-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(4.8rem, 9vw, 9.6rem); line-height: 1; letter-spacing: -.03em; margin: 14px 0 16px; }
.awx .err-lead { color: color-mix(in oklch, var(--alpenlicht) 74%, var(--felsgestein)); font-weight: 400; max-width: 44ch; margin: 0 auto 28px; }
.awx .err-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.awx .err-peaks { margin-top: clamp(40px, 6vw, 64px); }
.awx .err-peaks .eyebrow { justify-content: center; margin-bottom: 18px; }

/* === v1.4 — cart-glue (Cart-SEITE: Dawn-Maschine im Design-Look — aw_main_cart.liquid).
   Bindet quantity-input/cart-remove-button/Gravur-Edit (aw_cart_engraving_edit)
   an die .ci/.sum-Optik; keine neuen Farben, nur Tokens. === */
.awx .qty .quantity__input { width: 40px; min-width: 26px; text-align: center; background: none; border: 0; color: var(--fg); font: inherit; font-variant-numeric: tabular-nums; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.awx .qty .quantity__input::-webkit-outer-spin-button, .awx .qty .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.awx .ci__name a { color: inherit; text-decoration: none; }
.awx .ci__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.awx .ci__old { color: var(--fg-faint); font-size: var(--fs-14); margin-right: 6px; }
.awx .ci__error { font-size: var(--fs-12); color: var(--accent-text); margin-top: 6px; }
.awx .ci__error small:empty { display: none; }
.awx .cart__items--disabled { pointer-events: none; opacity: .55; }
.awx .ci .engrave-text::before { content: '„'; }
.awx .ci .engrave-text::after { content: '“'; }
.awx .ci .engraving-property { margin-top: 8px; }
.awx .ci .engraving-action-link { font-size: var(--fs-13); font-family: var(--font-sans); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
.awx .ci .engraving-action-link:hover { color: var(--alpenlicht); }
.awx .ci .engraving-separator { color: color-mix(in oklch, var(--alpenlicht) 40%, var(--felsgestein)); margin: 0 6px; }
.awx .ci .engraving-text-edit { gap: 8px; margin-top: 8px; }
.awx .ci .engraving-text-input { flex: 1; padding: 9px 12px; background: var(--felsgestein); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); color: var(--alpenlicht); font-family: var(--font-sans); font-size: var(--fs-14); }
.awx .ci .engraving-text-input:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; border-color: var(--bergsonne); }
.awx .ci .engraving-save-btn { background: var(--bergsonne); color: var(--aw-on-accent); border: 0; border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 600; cursor: pointer; font-size: var(--fs-13); }
.awx .ci .engraving-cancel-link { background: none; border: 0; color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); text-decoration: underline; cursor: pointer; font-size: var(--fs-13); }
.awx .ci .engraving-belongs-to { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 60%, var(--felsgestein)); margin-top: 2px; }
.awx .sum__checkout { margin-top: 18px; }
.awx .sum__update { margin-top: 12px; }
.awx #cart-errors { margin-top: 12px; font-size: var(--fs-13); color: var(--accent-text); }
.awx #cart-errors:empty { display: none; }
.awx .sum .mini-shipping-estimator { display: grid; gap: 8px; border-top: 1px solid var(--border-mid); margin-top: 18px; padding-top: 16px; font-size: var(--fs-13); }
.awx .sum .mini-shipping-estimator .totals-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: color-mix(in oklch, var(--alpenlicht) 80%, var(--felsgestein)); font-size: var(--fs-13); }
.awx .sum .mini-shipping-estimator .totals__subtotal { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-13); font-weight: 400; }
.awx .sum .mini-shipping-estimator select { padding: 8px 10px; background: var(--felsgestein); color: var(--alpenlicht); border: 1px solid var(--border-mid-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-13); }
.awx .sum .mini-shipping-estimator select:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .sum .mini-shipping-estimator .free-shipping-label, .awx .sum .mini-shipping-estimator .country__shipping-value { color: var(--accent-text); font-weight: 600; }
.awx .sum .mini-shipping-estimator .total__value, .awx .sum .mini-shipping-estimator .total-value-price { color: var(--alpenlicht); font-weight: 600; }
.awx .ck-fact span:first-child { color: var(--fg-subtle); }

/* === v1.5 — Section-Bau-Addenda (P4a-Flags: Event-Hero-Topo, Event-Shots-Bilder, Magazin-Feature-Link, B2B-Form-Button, Linien-Zeilen mobil, Spotlight-CTA, Live-Teaser-CTA) === */
.awx .evt-hero .aw-topo { z-index: 1; color: var(--alpenlicht); opacity: .1; }
.awx .evt-shots img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; }
.awx .mag-feat { text-decoration: none; }
.awx .b2b-form .btn[type="submit"], .awx .b2b-form button.btn { width: 100%; }
@media (max-width: 860px) { .awx .b-line .b-line__arrow { display: none; } }
.awx .evt-profile + .evt-hero__cta, .awx .evt-dist ~ .evt-hero__cta { margin-top: 26px; }
.awx .b-stage-grid .b-feat-cta { margin-top: 8px; }

/* === v1.7 — P7-Sweep-Fixes (MCP-Audit 05.07.2026) === */
/* TrailMap-BLOCKER: Textify-App (textboxAddT) sprengte den ATC-Submit auf 1957px — Submit nie breiter als Container */
.awx .pdp .product-form__submit, .awx .pdp form[action*="/cart/add"] .btn { width: 100%; max-width: 100%; min-width: 0; white-space: normal; box-sizing: border-box; }
/* Gravur-Opt-in (aw_engraving = Live-Snippet mit Weiss-auf-Dunkel-Annahme) im hellen PDP-Cockpit lesbar machen */
.awx .pdp [data-theme="light"] .engraving-option, .awx .pdp [data-theme="light"] .engraving-box, .awx .pdp [data-theme="light"] .engraving-option label, .awx .pdp [data-theme="light"] label[for="enable_engraving"] { color: var(--fg) !important; }
/* Cart-SEITE: Maschinen-Versandschaetzer erzeugte widerspruechlichen zweiten Versand/Endsummen-Block —
   Design hat die eigene Lieferland-Zeile. Nur auf der Cart-Seite ausblenden, Drawer unberuehrt. */
.awx .cart-wrap mini-shipping-estimator, .awx .cart-wrap .mini-shipping-estimator { display: none !important; }

/* === v1.8 — TrailMap-ATC-Wurzelfix: Textify-App injiziert 2 klassenlose DIVs (je ~389px) in die
   nowrap-Buy-Row und schiebt den Submit aus dem Viewport. App-Widgets = Live-Mechanik (behalten!),
   also: Row darf wrappen, Injektionen werden volle Zeilen ueber dem Button. === */
.awx .ck-buyrow { flex-wrap: wrap; }
.awx .ck-buyrow > div:not([class]) { flex: 1 1 100%; max-width: 100%; min-width: 0; }

/* === v2.0 — F1 PDP === */
/* Galerie-Konzept (Desktop-Abnahme): PDPs zeigen .pdp-gal aus product.media — kein Engine-Mount.
   Platzhalter fuer fehlende Produktfotos (TrailMap): dunkle Design-Kachel statt weisser Flaeche. */
.awx .pdp-gal__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(80% 80% at 50% 30%, color-mix(in oklch, var(--alpenlicht) 8%, var(--felsgestein)), var(--felsgestein)); }
.awx .pdp-gal__ph svg { width: 34px; height: 34px; color: var(--accent-text); opacity: .8; }
.awx .pdp-gal__ph span { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-muted); max-width: 36ch; }
.awx .pdp-gal__thumb-ph { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 60px; border-radius: var(--radius-sm); border: 1px dashed var(--border-mid-strong); font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg-faint); padding: 0 10px; text-align: center; }
/* Buy-Row: CTA (Deep-Link ODER Submit) fuellt die Zeile (Design style="flex:1") */
.awx .ck-buyrow .ck-atc { flex: 1 1 auto; margin-top: 0; }
.awx a.ck-atc { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Suchfeld-Optik als Deep-Link (Suche lebt in der Konfigurator-Engine, nicht auf der PDP) */
.awx .aw-search__lnk { display: block; width: 100%; padding: 13px 15px 13px 42px; font-size: var(--fs-15); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg-subtle); text-decoration: none; }
.awx .aw-search__lnk:hover { border-color: var(--fg); color: var(--fg); }
.awx .aw-search__lnk:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 1px; }
/* GPX-/Strecken-Step (.gpx-drop hatte im Design-Export kein CSS — Design-Sprache: Surface-Box) */
.awx .gpx-drop { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); text-align: left; text-decoration: none; font: inherit; }
.awx .gpx-drop svg { width: 22px; height: 22px; flex: none; color: var(--bergsonne-dark); }
.awx .gpx-drop b { display: block; font-size: var(--fs-14); font-weight: 500; }
.awx .gpx-drop small { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--fg-subtle); line-height: 1.45; }
.awx a.gpx-drop:hover { border-color: var(--fg); }
.awx a.gpx-drop:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 1px; }
.awx .gpx-field { margin-top: 10px; }
.awx .gpx-field label { display: block; font-size: var(--fs-12); color: var(--fg-subtle); margin-bottom: 6px; }
.awx .gpx-field input { width: 100%; padding: 12px 14px; font: inherit; font-size: var(--fs-14); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); }
.awx .gpx-field input:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 1px; }
/* Gravur-Toggle: Preis rechts (Kauf-PDPs, Wert = Live-Preis des Gravur-Produkts) */
.awx .aw-toggle .prc { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.awx .aw-engrave-wrap { margin-top: 12px; }
.awx .aw-engrave-wrap .subtle { font-size: var(--fs-12); margin: 6px 0 0; }
/* Subtexte unter Steps (Design: inline fs-12 margin 8px 0 0 — als Klasse statt style=) */
.awx .ck-substep { font-size: var(--fs-12); margin: 8px 0 0; }
/* Trust-Strip im Kaufbereich (Design style="justify-content:center;margin-top:14px") */
.awx .ck-buy .trust-strip { margin-top: 14px; }

/* === v2.1 — Abnahme-Restfixes (F2-Flags): Karten-Links ohne Unterstrich, Kompakt-Hero Legal/Versand === */
.awx a.aw-card { text-decoration: none; }
.awx .lp-hero--flat { min-height: auto; }
.awx .lp-hero--flat .lp-hero__in { padding-top: clamp(110px, 14vh, 160px); padding-bottom: clamp(28px, 5vh, 48px); }

/* === v2.2 — Nachfass-Politur (06.07.2026) === */
/* Punkt 2 — statische Inline-Styles als Klassen/Token (Light-Kontext byte-gleich zur Vorlage) */
/* Swatch-Caption (product-variant-options.liquid — war 4x inline position:absolute;color:rgb(18,18,18)) */
.awx .opt-swatch__cap { position: absolute; top: 110%; left: 50%; transform: translateX(-50%); color: var(--fg); font-size: 11px; white-space: nowrap; }
/* Lieferphasen-Icons (aw_arrivesby.liquid — war 4x inline color:#121212) */
.awx .delivery-phase-box .delivery-phase-icon { color: var(--fg); }
/* Utilities (aw_wizard_konfigurator text-align:center · aw_utfs_2026/aw-berg-utfs-style margin-bottom:8px;display:block) */
.awx .u-text-center { text-align: center; }
.awx .u-mb8-block { margin-bottom: 8px; display: block; }

/* Punkt 4 — Cockpit-Dunkel-Variante (Section-Setting cockpit_theme=dark am .cockpit; Default bleibt hell/CRO).
   Die Insel-Tokens flippen via [data-theme="dark"] automatisch (--surface/--fg/--border/--accent-text) —
   hier nur die Luecken, wo das Cockpit die ROHE Palette hart nutzt (--alpenlicht/--felsgestein/--bergsonne-dark). */
.awx .cockpit[data-theme="dark"] { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.awx .cockpit[data-theme="dark"] .ck-rating .s { color: var(--aw-star); } /* v19.07: Sterne IMMER Amazon-Gold */
.awx .cockpit[data-theme="dark"] .step__n { color: var(--accent-text); }
.awx .cockpit[data-theme="dark"] .qty button { color: var(--fg); }
.awx .cockpit[data-theme="dark"] .ship-eta { color: var(--fg-subtle); }
.awx .cockpit[data-theme="dark"] .ship-eta b { color: var(--fg); }
.awx .cockpit[data-theme="dark"] .ship-eta svg { color: var(--accent-text); }
.awx .cockpit[data-theme="dark"] .gpx-drop svg { color: var(--accent-text); }
.awx .cockpit[data-theme="dark"] .opt-explain-link { color: var(--fg-subtle); text-decoration-color: var(--border); }
.awx .cockpit[data-theme="dark"] .opt-explain-link:hover { color: var(--fg); }
.awx .cockpit[data-theme="dark"] .opt-explain__card { background: var(--surface); color: var(--fg); border-color: var(--border); }
.awx .cockpit[data-theme="dark"] .opt-explain__card:hover, .awx .cockpit[data-theme="dark"] .opt-explain__card.is-act { border-color: var(--fg); }
.awx .cockpit[data-theme="dark"] .opt-explain__media { background: var(--bg-muted); }
.awx .cockpit[data-theme="dark"] .opt-explain__body b { color: var(--fg); }
.awx .cockpit[data-theme="dark"] .opt-explain__body small { color: var(--fg-subtle); }
/* Radios/Swatches/Formfelder robust auf Dark-Surface zwingen — Storefront-Apps (gelacy/final.css)
   injizieren helle Label-Hintergruende, die im dunklen Cockpit den hellen Text unlesbar machen.
   Nur unpressed forcen, damit die gold markierte Auswahl (aria-pressed) sichtbar bleibt. */
.awx .cockpit[data-theme="dark"] .opt:not([aria-pressed="true"]) { background: var(--surface); color: var(--fg); }
.awx .cockpit[data-theme="dark"] .ck-swatch:not([aria-pressed="true"]) { background: var(--surface); color: var(--fg-muted); }
.awx .cockpit[data-theme="dark"] .gpx-field input, .awx .cockpit[data-theme="dark"] .aw-search input, .awx .cockpit[data-theme="dark"] .aw-search__lnk, .awx .cockpit[data-theme="dark"] .aw-engrave-wrap textarea { background: var(--surface); color: var(--fg); }
.awx .cockpit[data-theme="dark"] .aw-toggle__track { background: var(--bg-muted); }

/* === v2.3 — Visual-QA-Fixes (06.07.2026) === */
/* P2 — Silbentrennung: Display-/Hero-/Section-Headlines NIE auto-trennen
   (Hero "AN-FAS-SEN.", Section "FERTI-GEN" sahen kaputt aus). text-wrap:balance
   bleibt; Overflow langer Einzelwoerter faengt overflow-wrap ab. */
/* h3 bewusst NICHT mehr in dieser Liste (11.08.2026): oben steht `body.b h3 { hyphens: auto }`
   fuer genau diesen Fall — kleine Karten-Ueberschriften sollen den Trennstrich bekommen. Weil
   diese Ruecknahme spaeter kommt und dieselbe Spezifitaet hat, gewann sie und "QUALITAETS-
   VERSPRECHEN" (336 px gemessen) brach in einer 320-px-Karte hart nach dem E um: "…SPRECHE / N".
   Display-Groessen bleiben ungetrennt — dort faengt awFitHeadlines die Ueberbreite ab, bei einer
   Karten-h3 gibt es nichts, was faengt. */
.awx.b h1, .awx.b h2, .awx .lp-hero h1, .awx .lp-hero h2, .awx .b-hero h1, .awx .evt-hero h1, .awx .b-shead h2, .awx .b-shead h3, .awx .cmp-copy h2 { hyphens: manual; }
/* hyphens:auto NUR fuer Fliesstext/Legal — lange dt. Komposita (Datenschutzerklaerung,
   Widerrufsbelehrung) duerfen in schmalen Spalten sauber trennen statt zu ueberlaufen. */
.awx .aw-prose, .awx .aw-prose p, .awx .aw-prose li, .awx .rte, .awx .rte p, .awx .rte li, .awx .b-shead p, .awx .b-legal, .awx .b-legal p { hyphens: auto; overflow-wrap: break-word; }
/* P2-Folge: mit hyphens:manual brach das längste Display-Wort ("ANFASSEN." ≈ 468px) in der
   38ch-Spalte hart ohne Trennstrich um. Spalte so weit öffnen, dass das Wort auf EINE Zeile passt
   (Wort-pro-Zeile-Rhythmus bleibt); Lead bleibt schmal/lesbar. --berg-Hero (46ch) unberührt. */
.awx .lp-hero__col { max-width: 48rem; }
.awx .lp-hero__col .lead { max-width: 42ch; }
/* --berg-Hero: eigene (breitere) Spalte, damit lange Bergnamen (MATTERHORN = 470px @64px)
   und "ANFASSEN." ganz auf einer Zeile bleiben — kein harter Wortumbruch ("MATTERHOR|N"). */
.awx .lp-hero--berg .lp-hero__col { max-width: 49rem; }

/* === v2.4 — gzoom + Standard-PDP === */
/* Standard-/Katalog-PDP: generische Options-Pills duerfen umbrechen
   (Gutschein 25–250 €, viele Werte, lange Varianten-Namen). */
.awx .opt-row--wrap { flex-wrap: wrap; }

/* Galerie-Hauptbild ist jetzt ein <button> (Zoom-Trigger) — Button-Reset + Zoom-Cursor. */
.awx button.pdp-gal__main { position: relative; display: block; width: 100%; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.awx button.pdp-gal__main:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }
/* Zoom-Affordance unten rechts (rein visuell — Klick geht an den Button). */
.awx .pdp-gal__zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--felsgestein) 60%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid color-mix(in oklch, var(--alpenlicht) 22%, transparent); color: var(--alpenlicht); opacity: .9; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.awx .pdp-gal__zoom svg { width: 19px; height: 19px; }
.awx button.pdp-gal__main:hover .pdp-gal__zoom { opacity: 1; transform: scale(1.06); }

/* Fullscreen-Overlay: alle Medien vertikal, Scrim var(--felsgestein) ~.96 */
.awx .gzoom { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; background: color-mix(in oklch, var(--felsgestein) 96%, transparent); }
.awx .gzoom[hidden] { display: none; }
.awx .gzoom__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(10px, 1.6vw, 16px) clamp(14px, 3vw, 28px); border-bottom: 1px solid color-mix(in oklch, var(--alpenlicht) 10%, transparent); }
.awx .gzoom__count { font-family: var(--font-mono); font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 78%, transparent); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.awx .gzoom__close { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklch, var(--alpenlicht) 24%, transparent); background: color-mix(in oklch, var(--felsgestein) 60%, transparent); color: var(--alpenlicht); cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.awx .gzoom__close svg { width: 22px; height: 22px; }
.awx .gzoom__close:hover { background: color-mix(in srgb, var(--alpenlicht) 16%, var(--felsgestein)); transform: rotate(90deg); }
.awx .gzoom__close:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
/* v2.5 P1 (09.07.2026): gzoom horizontal — Scroll-Snap-Slides statt vertikalem Schlauch */
.awx .gzoom__scroll { flex: 1 1 auto; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.awx .gzoom__scroll::-webkit-scrollbar { display: none; }
/* v18.07 CRO-FIX-2 (Stephan): Lightbox-Bild fuellt jetzt die MAX verfuegbare Flaeche.
   Vorher schrumpften grosse fig-Polster (48–84px) + 1100px-Cap das Bild auf ~60% Breite
   mit viel Weissraum. Jetzt: kleine Polster, kein Breiten-Cap → Bild so gross wie moeglich
   (Viewport minus Chrome), mobil randlos (s.u.). max-height haelt es voll sichtbar (contain). */
.awx .gzoom__fig { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: grid; place-items: center; padding: clamp(8px, 1.4vw, 18px) clamp(12px, 2vw, 30px); overflow: hidden; }
.awx .gzoom__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); cursor: zoom-in; transform-origin: var(--gz-x, 50%) var(--gz-y, 50%); transition: transform var(--dur-base) var(--ease-out); will-change: transform; }
.awx .gzoom__img.is-zoomed { transform: scale(var(--gz-s, 2)); cursor: zoom-out; border-radius: 0; }
/* Body-Scroll-Lock (Klasse statt Inline-Style) */
.awx.gz-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .awx .gzoom__scroll { scroll-behavior: auto; }
  .awx .gzoom__img, .awx .gzoom__close, .awx .pdp-gal__zoom { transition: none; }
}
@media (max-width: 749px) {
  .awx .pdp-gal__zoom { width: 44px; height: 44px; right: 10px; bottom: 10px; }
  .awx .gzoom__close { width: 48px; height: 48px; }
  .awx .gzoom__fig { padding: 0; }               /* v18.07 CRO-FIX-2: mobil randlos */
  .awx .gzoom__img { max-width: 100vw; border-radius: 0; }
}


/* === v2.5 — P1 Galerie-Swiper (09.07.2026): PDP-Track + Pfeile (Galerie & gzoom) === */
.awx .pdp-gal__vp { position: relative; aspect-ratio: 4/3.6; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-mid); background: var(--bg-subtle); box-shadow: var(--shadow-dark-xl); }
.awx .pdp-gal__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.awx .pdp-gal__track::-webkit-scrollbar { display: none; }
.awx button.pdp-gal__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.awx button.pdp-gal__slide:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: -3px; }
/* v6.117: gleiche Begruendung wie bei .pdp-gal__main — die AKTIVE Galerie rendert ueber
   den Slider-Track, nicht ueber __main. Der erste Anlauf fixte nur __main; im Bild war
   der Beschnitt danach unveraendert (Infografik unten/rechts abgeschnitten). */
.awx .pdp-gal__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* v19.07: Arrow-Sprache vereinheitlicht — dunkle Buehnen-Variante (Galerie/gzoom).
   blur 6px -> 8px + Chevron-Stroke 1.5 (identisch zur Review-Slider-Hell-Variante). */
.awx .pdp-gal__arr, .awx .gzoom__arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid color-mix(in oklch, var(--alpenlicht) 24%, transparent); background: color-mix(in oklch, var(--felsgestein) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--alpenlicht); cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.awx .pdp-gal__arr svg, .awx .gzoom__arr svg { width: 20px; height: 20px; stroke-width: 1.5; }
.awx .pdp-gal__arr:hover, .awx .gzoom__arr:hover { background: color-mix(in oklch, var(--felsgestein) 82%, transparent); transform: translateY(-50%) scale(1.06); }
.awx .pdp-gal__arr:focus-visible, .awx .gzoom__arr:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
.awx .pdp-gal__arr--prev { left: 12px; }
.awx .pdp-gal__arr--next { right: 12px; }
.awx .gzoom__arr { width: 50px; height: 50px; }
.awx .gzoom__arr--prev { left: clamp(10px, 2vw, 24px); }
.awx .gzoom__arr--next { right: clamp(10px, 2vw, 24px); }
.awx .pdp-gal__zoom { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .awx .pdp-gal__track, .awx .gzoom__scroll { scroll-behavior: auto; } .awx .pdp-gal__arr, .awx .gzoom__arr { transition: none; } }

/* === v2.7 — aw_berg_produkte === */
.awx .bp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.awx .bp-ghead { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; margin-top: var(--space-6); min-width: 0; }
.awx .bp-ghead:first-child { margin-top: 0; }
.awx .bp-ghead__name { font-family: var(--font-serif); font-size: var(--fs-24); letter-spacing: -.015em; line-height: 1.15; color: var(--alpenlicht); white-space: nowrap; }
.awx .bp-ghead::after { content: ""; flex: 1; border-top: 1px solid var(--border-mid); transform: translateY(-5px); }
.awx .bp-card { display: flex; flex-direction: column; text-decoration: none; color: var(--alpenlicht); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 3%, var(--felsgestein)); transition: border-color var(--dur-base) var(--ease-out); }
.awx .bp-card:hover { border-color: var(--bergsonne); }
.awx .bp-card:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 3px; }
.awx .bp-card__media { aspect-ratio: 1 / 1; overflow: hidden; background: color-mix(in srgb, var(--alpenlicht) 6%, var(--felsgestein)); }
.awx .bp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.awx .bp-card:hover .bp-card__media img { transform: scale(1.04); }
.awx .bp-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.awx .bp-card__title { font-family: var(--font-serif); font-size: var(--fs-18); line-height: 1.25; letter-spacing: -.01em; }
.awx .bp-card__price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-mid); font-family: var(--font-serif); font-size: var(--fs-18); color: var(--alpenlicht); font-variant-numeric: tabular-nums; }
.awx .bp-card__price small { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 400; color: var(--fg-muted); }
.awx .bp-card--cta { align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 26px 20px; background: transparent; border-style: dashed; border-color: var(--border-mid-strong); }
.awx .bp-card--cta .bp-card__title { font-size: var(--fs-20); }
.awx .bp-card--cta p { margin: 0; color: var(--fg-muted); font-weight: 400; font-size: var(--fs-14); line-height: 1.5; max-width: 30ch; }
.awx .bp-card--cta .btn { margin-top: 6px; }
.awx .bp-note { margin-top: var(--space-4); font-size: var(--fs-12); color: var(--fg-subtle); }
@media (max-width: 1023px) { .awx .bp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .awx .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .awx .bp-card__body { padding: 12px 12px 14px; }
  .awx .bp-card--cta { grid-column: 1 / -1; }
}

/* === v2.7 — aw_advertorial === */
/* Advertorial (Meta-Cold-Traffic): Magazin-Kanon (.art-* aus aw_main_article) auf dunklem
   Seiten-Default + Pflicht-Kennzeichnung, 68ch-Lesespalte, Produkt-Teaser-Karte im Textfluss.
   Nur Tokens/color-mix bestehender CI-Farben — kein neues Hex. */
.awx .adv .art-body { max-width: 68ch; }
.awx .adv-body { padding-top: clamp(24px, 4vw, 40px); }
/* Pflicht-Badge „Anzeige“ (Mini-Badge → radius-pill erlaubt) + Zusatznote */
.awx .adv-mark { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.awx .adv-flag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); border: 1px solid color-mix(in oklch, var(--bergsonne) 45%, transparent); border-radius: var(--radius-pill); padding: 4px 11px; }
.awx .adv-mark__note { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
/* Autor-Zeile + Vorspann */
.awx .adv-autor { margin-top: 14px; font-size: var(--fs-14); color: color-mix(in oklch, var(--alpenlicht) 62%, var(--felsgestein)); }
.awx .adv-lead { margin: 18px 0 0; font-size: var(--fs-20); font-weight: 400; line-height: 1.6; color: color-mix(in oklch, var(--alpenlicht) 82%, var(--felsgestein)); max-width: 58ch; text-wrap: pretty; }
/* Zwischenbild mit Caption */
.awx .adv-fig { margin: clamp(28px, 5vw, 44px) 0; }
.awx .adv-fig img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.awx .adv-fig figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
/* Produkt-Teaser-Karte im Lesefluss (Preis dynamisch aus product.price_min) */
.awx .adv-prod { display: flex; align-items: stretch; gap: clamp(18px, 3vw, 26px); margin: clamp(32px, 5vw, 48px) 0; border: 1px solid var(--border-mid-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--alpenlicht) 5.5%, var(--felsgestein)); overflow: hidden; }
.awx .adv-prod__media { flex: 0 0 min(36%, 220px); display: block; }
.awx .adv-prod__media img { width: 100%; height: 100%; object-fit: cover; }
.awx .adv-prod__media:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: -2px; }
.awx .adv-prod__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px) 0; }
.awx .adv-prod__kicker { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: .04em; color: var(--accent-text); }
.awx .adv-prod__name { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-24); margin: 0; }
.awx .adv-prod__name a { color: inherit; text-decoration: none; }
.awx .adv-prod__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.awx .adv-prod__desc { font-size: var(--fs-14); font-weight: 400; line-height: 1.6; color: color-mix(in oklch, var(--alpenlicht) 72%, var(--felsgestein)); margin: 0; }
.awx .adv-prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.awx .adv-prod__pricebox { display: flex; flex-direction: column; gap: 2px; }
.awx .adv-prod__price { font-family: var(--font-serif); font-size: var(--fs-24); line-height: 1.15; font-variant-numeric: tabular-nums; }
.awx .adv-prod__price small { font-family: var(--font-sans); font-size: var(--fs-13); color: color-mix(in oklch, var(--alpenlicht) 62%, var(--felsgestein)); }
.awx .adv-prod__note { font-size: var(--fs-12); color: color-mix(in oklch, var(--alpenlicht) 55%, var(--felsgestein)); }
/* Soft-CTA (Textlink, nutzt .art-body a.ml-Optik) */
.awx .adv-cta-soft { margin: clamp(24px, 4vw, 36px) 0; font-size: var(--fs-16); }
@media (max-width: 640px) {
  .awx .adv-prod { flex-direction: column; }
  .awx .adv-prod__media { flex-basis: auto; aspect-ratio: 16 / 10; }
  .awx .adv-prod__body { padding: 18px; }
  .awx .adv-prod .btn { width: 100%; }
}

/* === v4.8 — aw_color_swatches: Inline-Styles in Klassen gehoben (kit-Gesetz) === */
.awx .color-swatches { display: block; gap: 1rem; flex-wrap: wrap; }
.awx .option_color_swatch { position: relative; background: var(--sw-bg); width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--border-mid); display: inline-block; cursor: pointer; } /* v4.72: Fallback-Hex #444 entfernt — Token ist immer geladen (Audit 12.07.2026) */
.awx .option_color_swatch::after { content: attr(data-swatch-name); position: absolute; top: 110%; left: 50%; transform: translateX(-50%); color: var(--fg); font-size: 11px; white-space: nowrap; }


/* === v2.8 — Cart als helle Commerce-Insel (Dark-Mode-Deepdive §5: weicher
   Uebergang in den weissen Shopify-Checkout). Flaechen-Muster = .cockpit.
   Aktiv nur bei data-theme="light" (Editor-Setting cart_theme). === */
.awx .cart-wrap[data-theme="light"] {
  background: var(--alpenlicht); color: var(--felsgestein);
  border-radius: var(--radius-xl); padding: clamp(22px, 2.4vw, 34px);
  box-shadow: var(--shadow-dark-xl);
  border: 1px solid color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein));
  margin-block: calc(76px + var(--space-6)) var(--space-8); /* unter dem fixen Header beginnen */
}

/* v2.8 — 404-Suchfeld (dritter Rettungsweg) */
.awx .err-search { display: flex; gap: 10px; max-width: 460px; margin: var(--space-6) auto 0; }
.awx .err-search__input { flex: 1; padding: 12px 16px; font: inherit; font-size: var(--fs-15);
  color: var(--alpenlicht); background: transparent; border: 1px solid var(--border-mid-strong);
  border-radius: var(--radius-md); }
.awx .err-search__input::placeholder { color: var(--fg-subtle); }

/* v2.8 — Suche: Produkt-Thumbnail in Treffer-Zeile */
.awx .srch-hit__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid); flex-shrink: 0; }

/* === v2.9 — FAQ/Reviews-Insel (Dark-Mode-Deepdive §5): helle Commerce-Insel
   fuer aw_faq + aw_reviews im Cockpit-/Cart-Muster (.cockpit, .cart-wrap[data-theme="light"]).
   Aktiv NUR bei data-theme="light" auf dem Section-Root (Editor-Setting insel_theme,
   Default dark = Attribut wird nicht emittiert, Rendering unveraendert).
   Semantik-Token (--fg-muted/-subtle, --border-mid, --accent-text) flippen ueber
   aw_tokens.css [data-theme="light"] automatisch — hier nur Insel-Flaeche plus die
   direkt getokenten Farben (--alpenlicht/--bergsonne), die sonst hell-auf-hell staenden. === */
.awx .b-sec[data-theme="light"] {
  background: var(--alpenlicht); color: var(--felsgestein);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklch, var(--alpenlicht) 70%, var(--felsgestein));
  box-shadow: var(--shadow-dark-xl);
  width: min(calc(100% - clamp(24px, 4vw, 64px)), 1480px);
  margin-inline: auto;
  margin-block: clamp(24px, 4vw, 56px);
  padding-block: clamp(32px, 5vw, 64px);
}
/* Border-Shorthand oben ersetzt bewusst die b-sec--top/--bot-Trennlinien:
   die Karte trennt sich selbst; b-sec--panel wird durch die Flaeche ueberdeckt. */
/* FAQ: offene Frage + Nummer + Fokusring von Direkt-Token auf Insel-Werte */
.awx .b-sec[data-theme="light"] .b-faqi[open] .b-faqi__q h3 { color: var(--felsgestein); }
.awx .b-sec[data-theme="light"] .b-faqi__n { color: var(--accent-text); }
.awx .b-sec[data-theme="light"] .b-faqi__q:focus-visible { outline-color: var(--accent-text); }
/* Reviews: Zitat + Sterne (v19.07: Sterne auch auf heller Insel Amazon-Gold statt bergsonne-dark) */
.awx .b-sec[data-theme="light"] .b-rev p { color: var(--felsgestein); }
.awx .b-sec[data-theme="light"] .b-rev__stars { color: var(--aw-star); }


/* === v2.10 — Headline-Fit (Stephan 11.07.: Mid-Word-Break "darf nirgends passieren") ===
   Display-Headlines skalieren per JS minimal runter, statt zu brechen/ueberzulaufen. */
.awx .aw-fit-headline { display: block; }


/* === v2.11 — Cart-Upgrades (Benchmark A1/A2) === */
.awx .ci__upg { display: inline-block; line-height: 1.45; margin-top: 8px; padding: 7px 12px; /* v4.60: inline-flex brach '(+ 20,00 €)' auch am Desktop um */
  font: inherit; font-size: var(--fs-13); color: var(--accent-text); background: transparent;
  border: 1px dashed var(--border-mid-strong); border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base); }
.awx .ci__upg:hover { border-color: var(--bergsonne); background: color-mix(in oklch, var(--bergsonne) 8%, transparent); }
.awx .sum__express { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-block: 10px;
  border: 1px solid var(--border-mid-strong); border-radius: var(--radius-md); cursor: pointer;
  background: color-mix(in oklch, var(--bergsonne) 6%, transparent); }
.awx .sum__express input { margin-top: 3px; accent-color: var(--bergsonne); }
.awx .sum__express-txt { font-size: var(--fs-14); line-height: 1.4; color: var(--fg); }
.awx .sum__express-txt b { color: var(--fg); } /* v4.64: erbte Akzent-Braun der hellen Insel -> unlesbar auf dunkler sum-Karte */
.awx .sum__express-txt small { color: var(--fg-muted); }

/* v2.11 — A6 Wiedereinstieg im leeren Cart */
.awx .cart-empty__resume { display: inline-block; margin-bottom: 18px; font-size: var(--fs-15);
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; }

/* v2.11 — Spacedome K6-L08: Alle-Bewertungen-Link */
.awx .b-revs__all { margin-top: 22px; }
.awx .b-revs__all a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; font-size: var(--fs-15); }

/* v2.12 — Payment-Icons dezent (K5-L02 Trust ohne Logo-Ramsch) */
.awx .cockpit .aw-payment-icons .list-payment { display: flex; flex-wrap: wrap; gap: 5px; }
.awx .cockpit .aw-payment-icons .icon { height: 18px; width: auto; }

/* v4.71 — Kundenkonto: Wiederbestellen-Button (Dawn-Order-Seite) */
.awx .aw-reorder { margin-top: 10px; min-height: 36px; padding: 6px 14px; font-size: 13px; }


/* === v4.72 — aw-faq: komplette Inline-Styles + Section-<style> in Klassen gehoben
   (Audit 12.07.2026, §1 Zentrales CSS). Hex-Werte waren 1:1 die CI-Tokens
   (#FFFBF7 = --alpenlicht, #1E1E1C = --felsgestein); rgba(30,30,28,x) = Felsgestein-
   Triplet und bleibt als rgba-Literal (bestehende Konvention der Caption-Overlays hier).
   Radien 14px/8px bewusst literal — kein Token-Match, optische Paritaet vor Token-Rundung.
   Custom-Prop-Traeger im Liquid: --awfaq-pt/-pb/-bg (Editor-Settings). === */
.awx .aw-faq { padding: var(--awfaq-pt, 80px) 24px var(--awfaq-pb, 80px); background: var(--awfaq-bg, var(--alpenlicht)); color: var(--felsgestein); }
.awx .aw-faq__inner { max-width: 1280px; margin: 0 auto; }
.awx .aw-faq__intro { text-align: center; max-width: 800px; margin: 0 auto 50px; }
.awx .aw-faq__intro-h { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 38px); font-weight: 400; line-height: 1.2; margin: 0 0 16px; }
.awx .aw-faq__intro-p { font-size: 17px; line-height: 1.7; opacity: 0.85; margin: 0; }
.awx .aw-faq__head { text-align: center; margin-bottom: 40px; }
.awx .aw-faq__h2 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 400; line-height: 1.15; margin: 0 0 12px; }
.awx .aw-faq__sub { font-size: 16px; opacity: 0.7; margin: 0; }
.awx .aw-faq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
@media (max-width: 749px) {
  .awx .aw-faq__grid { grid-template-columns: 1fr; gap: 16px; }
}
.awx .aw-faq__card { background: rgba(30, 30, 28, 0.04); border: 1px solid rgba(30, 30, 28, 0.08); border-radius: 14px; padding: 24px; transition: background 0.2s ease, border-color 0.2s ease; }
.awx .aw-faq__card:hover { background: rgba(30, 30, 28, 0.07); border-color: rgba(30, 30, 28, 0.16); }
.awx .aw-faq__q { font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; color: var(--felsgestein); }
.awx .aw-faq__a { font-size: 15px; line-height: 1.65; margin: 0; color: var(--felsgestein); opacity: 0.85; white-space: pre-wrap; }
.awx .aw-faq__empty { text-align: center; opacity: 0.6; font-size: 14px; }
.awx .aw-faq__cta { text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(30, 30, 28, 0.1); }
.awx .aw-faq__cta-text { margin: 0 0 18px; opacity: 0.85; font-size: 17px; }
.awx .aw-faq__cta-btn { display: inline-block; padding: 14px 32px; background: var(--felsgestein); color: var(--alpenlicht); text-decoration: none; border-radius: 8px; font-weight: 600; font-family: var(--font-sans); font-size: 15px; }


/* === v4.72 — aw_reviews_slider: Inline-Deklarationen → Custom-Prop-Traeger
   (Audit 12.07.2026, §1). Werte kommen aus den Schema-color-/number-Settings
   (Defaults dort: bg #f8f9fa, Sterne #fbbc05, Sterne-Bild 70px). === */
.awx .review-slide { background-color: var(--rev-bg); }
.awx .review-stars-img { width: var(--stars-w, 70px); height: auto; }
.awx .review-stars { color: var(--aw-star); } /* v19.07: Sterne IMMER Amazon-Gold (ueberschreibt block.star_color) */

/* v19.07: Slider-Pfeile vereinheitlicht — der Review-Slider nutzt jetzt DIESELBE
   Arrow-Sprache wie die PDP-Galerie (.pdp-gal__arr): 44px, dezenter Fill + 1px Border,
   Chevron 1.5px. Die Section ist eine helle Insel (data-theme="light"), daher die
   Hell-Variante (dezentes dunkles Glas auf Creme statt der alten thin-outline-Kreise).
   Ersetzt die .arrow-button-Regeln aus dem Inline-<style> der Section (dort entfernt). */
.awx .review-slider-container .arrow-button {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--felsgestein) 12%, transparent);
  background: color-mix(in oklch, var(--felsgestein) 6%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--fg); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.awx .review-slider-container .arrow-button svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; }
.awx .review-slider-container .arrow-button:hover:not(:disabled) { background: color-mix(in oklch, var(--felsgestein) 10%, transparent); transform: translateY(-50%) scale(1.06); }
.awx .review-slider-container .arrow-button:disabled { opacity: .35; cursor: not-allowed; }
.awx .review-slider-container .arrow-button:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }
/* Einzug = Container-Padding, damit der Pfeil VOLL ueber der hellen Slide sitzt (in deren
   fuer den Pfeil reservierter Rand-Innenpolsterung) — das dezente dunkle Glas bleibt so
   sichtbar, auch wenn die Section auf einer dunklen Seite steht (Section ist token-Insel
   ohne eigene Flaeche). Ersetzt das alte Desktop -50px (Pfeil ausserhalb = ueber Dunkel). */
.awx .review-slider-container .arrow-left { left: 20px; }
.awx .review-slider-container .arrow-right { right: 20px; }
@media (min-width: 768px) {
  .awx .review-slider-container .arrow-left { left: 60px; }
  .awx .review-slider-container .arrow-right { right: 60px; }
}
@media (prefers-reduced-motion: reduce) { .awx .review-slider-container .arrow-button { transition: none; } }


/* === v4.72 — aw-konfigurator-erklaerung / aw-image-text-split / aw-produkt-details:
   direkte style=-Deklarationen (padding/background/color) in Klassen gehoben,
   Werte als Custom-Props aus den Editor-Settings (--awke-*/.awx --awits-*/--awpd-*),
   Hex-Fallbacks → var(--alpenlicht)/var(--felsgestein) (Audit 12.07.2026, .awx §1). === */
.aw-konf-erkl { padding: var(--awke-pt, 60px) 0 var(--awke-pb, 80px); background: var(--awke-bg, var(--alpenlicht)); color: var(--awke-text, var(--felsgestein)); }
.awx .aw-its { padding: var(--awits-pt, 60px) 0 var(--awits-pb, 60px); background: var(--awits-bg, var(--alpenlicht)); color: var(--awits-text, var(--felsgestein)); }
.awx .aw-prod-details { padding: var(--awpd-pt, 60px) 0 var(--awpd-pb, 60px); background: var(--awpd-bg, var(--alpenlicht)); color: var(--awpd-text, var(--felsgestein)); }


/* === v4.72 — aw_block_promobox: style="color:{{ text_color }}" → Custom-Prop-Traeger
   --promo-fg (Audit 12.07.2026, §1). Leerer Setting-Wert faellt wie zuvor auf die
   geerbte Box-Farbe zurueck (ungueltige var() → inherit bei color). === */
.awx .promo-subtitle { color: var(--promo-fg); }


/* === v4.74 — Audit-Nachbefunde 12.07.2026 (visuelle Abnahme, §12):
   (1) 404-Hero mobil: Eyebrow kollidierte mit dem transparenten Fix-Header (390px) →
       Header-Freiraum oben; Zentrierung bleibt, nur der Startpunkt rückt unters Chrome.
   (2) Suchtreffer mobil: Serif-Titel brach 5-zeilig neben Kind/Preis-Spalten →
       kompaktere Type + Preis rückt in die Zeile darunter (volle Namensbreite).
   (3) Collection-Pagination + Sortieren-Select (Dawn-Erbe) waren auf dem dunklen
       Kanon fast unsichtbar → Token-Farben. === */
@media (max-width: 749px) {
  .awx .err-hero { padding-top: 104px; }
  .awx .srch-hit { flex-wrap: wrap; row-gap: 2px; }
  .awx .srch-hit__name { font-size: var(--fs-16); flex: 1 1 calc(100% - 78px); }
  .awx .srch-hit__meta { margin-left: 78px; flex: 1 1 100%; }
}
.awx .pagination__item, .awx .pagination__item-arrow { color: var(--fg-muted); }
.awx .pagination__item:hover, .awx .pagination__item[aria-current] { color: var(--alpenlicht); }
.awx .pagination__item[aria-current]::after { background-color: var(--alpenlicht); }
.awx .facet-filters__label, .awx .facet-filters .facet-filters__summary { color: var(--fg-muted); }
.awx .facet-filters__sort { color: var(--fg); background: transparent; }
.awx .facet-filters__sort option { color: var(--felsgestein); }


/* === v4.77 — Abgleich-Umsetzung 12.07.2026 (PDP-Cockpit + Streichpreis-Feinschliff):
   (1) Versand-Link im Preis-Hinweis folgt der Note-Farbe (Text-Trigger-Muster).
   (2) Payment-Icon-Zeile direkt unterm ATC: kompakter Abstand, dezent.
   (3) Streichpreise (NUR bei Aktionen, globaler Schalter): abgeschwächt neben dem
       Hauptpreis — Karten via .lp-card__was, Zeilen via .b-line__was, PDP via <s>. === */
.awx .ck-price .note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.awx .ck-buy .aw-payment-icons { margin-top: 10px; }
.awx .ck-buy .aw-payment-icons .list-payment__item { opacity: .8; }
.awx .ck-price s[data-aw-compare] { opacity: .65; margin-right: 6px; }
.awx .lp-card__was s { opacity: .65; }
.awx .b-line__was { font-size: var(--fs-14); opacity: .65; margin-right: 6px; }

/* ============================================================================
   v18.07 CRO-FIX PDP-Buybox (Stephan 18.07) — Straffen + Gravur (Zeilen + Live-Vorschau)
   NEUE Komponenten (additiv), keine Overrides bestehender Klassen.
   ============================================================================ */

/* (3b) Preis + gewaehlte Config kompakt DIREKT ueber den Groessen-Kacheln: die Top-Preiszeile
   traegt jetzt die Live-Config-Zusammenfassung (data-aw-summary) als zweite, kleine Zeile. */
.awx .ck-price .ck-cfg { flex-basis: 100%; font-size: var(--fs-12); color: var(--fg-muted); font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.3; }
.awx .ck-price .ck-cfg:empty { display: none; }

/* (3a) Groessenvergleich (Sizescale) hinter Toggle — mobil per Default zu, Desktop immer offen. */
.awx .ck-scale-toggle { margin-top: 0; }
.awx .ck-scale-panel { display: none; }
.awx .ck-scale-panel.is-open { display: block; margin-top: 10px; }
@media (min-width: 861px) {
  .awx .ck-step--scale .ck-scale-toggle { display: none; }
  .awx .ck-step--scale .ck-scale-panel { display: block; margin-top: 2px; }
}

/* (3c) Options-Gruppen mobil dichter (war sehr luftig — Stephan). */
@media (max-width: 860px) {
  .awx .cockpit { padding: 18px 15px; }
  .awx .cockpit .ck-price { margin: 12px 0; padding: 11px 0; }
  .awx .cockpit .ck-step { padding: 11px 0; }
  .awx .cockpit .ck-step:first-of-type { padding-top: 2px; }
  .awx .cockpit .ck-step .opt-label { margin-bottom: 7px; }
  .awx .cockpit .ck-price .amt { font-size: clamp(2.8rem, 8vw, 3.4rem); }
}

/* (4a) Gravur — mehrere Zeilen-Felder (Base 3 / Wall 2, je 20 Zeichen) statt EINEM Freitext.
   Sichtbare Felder tragen KEIN name — nur das Hidden-Input submittet properties[Gewuenschter Text]
   (Zeilen per \n verbunden). Muster wie Konfigurator (e-row/e-input/e-count). */
.awx .grav-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.awx .grav-row { display: flex; align-items: center; gap: 8px; }
.awx .grav-row[hidden] { display: none; }
.awx .grav-line { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--alpenlicht); color: var(--felsgestein); font: inherit; font-size: var(--fs-15); }
.awx .grav-line:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 1px; border-color: var(--accent-text); }
.awx .grav-count { flex: none; min-width: 3.4em; text-align: right; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.awx .grav-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: none; color: var(--fg-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.awx .grav-x:hover { color: var(--felsgestein); border-color: var(--felsgestein); }
.awx .grav-addline { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 6px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); background: none; color: var(--felsgestein-55); font: inherit; font-size: var(--fs-13); cursor: pointer; }
.awx .grav-addline:hover { color: var(--felsgestein); border-color: var(--felsgestein); }
.awx .grav-addline[hidden] { display: none; }

/* (4b) Live-Gravur-Vorschau OHNE three.js: Eiche-/Zirbe-Holzfoto als Sockel-Flaeche (folgt der
   Holz-Wahl), Text als Gravur (dunkelbraun, multiply, leichte Perspektive). Lazy — nur wenn
   Toggle an. --grav-wood = dokumentierter dynamischer JS-Custom-Prop-Traeger. */
.awx .grav-preview { margin-top: 12px; }
.awx .grav-preview[hidden] { display: none; }
.awx .grav-preview__plate { position: relative; aspect-ratio: 16 / 6; border-radius: var(--radius-md); overflow: hidden; border: 1px solid color-mix(in oklch, var(--felsgestein) 34%, var(--alpenholz)); background-image: var(--grav-wood); background-size: cover; background-position: center; box-shadow: inset 0 2px 12px color-mix(in oklch, var(--felsgestein) 32%, transparent); }
/* KEIN transform/z-index/opacity auf diesem Container — sonst isoliert es das
   mix-blend-mode:multiply der Zeilen vom Holz-Backdrop (Gravur-Effekt ginge verloren). */
.awx .grav-preview__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; padding: 7% 9%; text-align: center; }
.awx .grav-preview__text span { display: block; max-width: 100%; font-family: var(--font-serif); font-size: clamp(13px, 3.4vw, 20px); letter-spacing: .02em; line-height: 1.08; color: color-mix(in oklch, var(--felsgestein) 74%, var(--alpenholz)); mix-blend-mode: multiply; text-shadow: 0 1px 0 color-mix(in oklch, var(--alpenlicht) 38%, transparent), 0 -1px 1px color-mix(in oklch, var(--felsgestein) 60%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awx .grav-preview__cap { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-11); color: var(--fg-faint); text-align: center; }

/* Dark-Cockpit-Varianten (Default bleibt hell/CRO) */
.awx .cockpit[data-theme="dark"] .grav-line { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.awx .cockpit[data-theme="dark"] .grav-addline, .awx .cockpit[data-theme="dark"] .grav-x { color: var(--fg-subtle); }

/* v6.70 Wall-Staender-Upsell (Cart-Seite) */
.awx .aw-wall-upsell {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  border: 1px solid var(--border-mid); border-radius: var(--radius-md);
  padding: 10px 12px; margin: 10px 0;
}
.awx .aw-wall-upsell__t { font-size: var(--fs-13); line-height: 1.4; }
.awx .aw-wall-upsell__add { flex: none; white-space: nowrap; }

/* === v6.117 — RECHTSSEITEN /policies/* (29.07.2026, Stephan: „nicht lesbar") =========
   Zwei Befunde an derselben Seite: (1) sie war schwarz-auf-schwarz — Ursache lag im
   Hero-Band (theme.liquid + aw_chrome.js, dort gefixt); (2) sie traegt gar kein
   Theme-Styling, weil Shopify /policies/* OHNE Section rendert: es gibt kein
   templates/policy.* und keine sections/main-policy.liquid, nur Shopifys eigenes
   .shopify-policy__*-Markup. Ergebnis war Systemschrift in einer 475-px-Spalte mit
   zentrierter Ueberschrift, die direkt auf dem ersten Absatz klebte (gemessen).
   Versandkosten und Widerruf gehoeren zur Kaufentscheidung — die Seiten bekommen die
   Typografie des Shops. Reine Ergaenzung, kein Eingriff in bestehende Sections. */
.awx .shopify-policy__container {
  max-width: var(--content-max); margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(20px, 5vw, 64px) clamp(56px, 9vw, 120px);
}
.awx .shopify-policy__title { text-align: left; margin: 0 0 clamp(20px, 3vw, 36px); }
.awx .shopify-policy__title h1 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: normal;
  font-size: clamp(3.2rem, 4vw, 4.48rem); line-height: 1.08; margin: 0; color: var(--fg);
}
.awx .shopify-policy__body { max-width: 72ch; margin: 0; color: var(--fg-muted); }
.awx .shopify-policy__body > .rte { padding: 0; }
.awx .shopify-policy__body p, .awx .shopify-policy__body li {
  font-size: var(--fs-16); line-height: 1.72; margin: 0 0 14px;
}
.awx .shopify-policy__body h2, .awx .shopify-policy__body h3, .awx .shopify-policy__body h4 {
  font-family: var(--font-sans); color: var(--fg); letter-spacing: normal;
  margin: clamp(28px, 3.5vw, 44px) 0 12px; line-height: 1.25;
}
.awx .shopify-policy__body h2 { font-size: var(--fs-24); }
.awx .shopify-policy__body h3, .awx .shopify-policy__body h4 { font-size: var(--fs-18); }
.awx .shopify-policy__body strong { color: var(--fg); font-weight: 600; }
.awx .shopify-policy__body ul, .awx .shopify-policy__body ol { margin: 0 0 18px; padding-left: 22px; }
.awx .shopify-policy__body li { margin-bottom: 8px; }
.awx .shopify-policy__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.awx .shopify-policy__body a:hover { color: var(--accent-text); }
.awx .shopify-policy__body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: var(--fs-15); }
.awx .shopify-policy__body th, .awx .shopify-policy__body td { border: 1px solid var(--border-mid); padding: 10px 12px; text-align: left; }
.awx .shopify-policy__body th { color: var(--fg); font-weight: 600; background: var(--bg-subtle); }
@media (max-width: 640px) {
  .awx .shopify-policy__title h1 { font-size: clamp(2.6rem, 9vw, 3.4rem); }
  .awx .shopify-policy__body { max-width: none; }
}