/** Shopify CDN: Minification failed

Line 2212: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; }
  /* 27.08.2026 (§17): Punkte sind Touch-Ziele, 30 px waren zu klein ⇒ min-height 44 px. */
  .awx .lp-dots button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 7px; background: none; border: 0; padding: 8px 10px; 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 ---------- */
/* v13.08 (Track-LP): auto-fit statt fester Dreierteilung. Es gibt Linien, fuer die es
   nicht drei brauchbare Kundenfotos gibt — auf der Track-LP shopweit nur zwei, auf denen
   die Strecke ueberhaupt zu sehen ist. Mit repeat(3,1fr) blieb die dritte Spalte leer;
   jetzt teilen sich zwei Karten die Breite. Bei drei Karten aendert sich nichts. */
.awx .b-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),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; }
/* max-width:none ist noetig: der Kit-Basisblock setzt `.awx img { max-width: 100% }`,
   und das kappt die randlose Breite auf die Content-Box — gemessen 240 statt 274 px,
   das Bild sass links buendig und rechts 33 px zu kurz (Stephan: "Fotos nicht zentriert"). */
.awx .b-rev__foto { width: calc(100% + 2 * clamp(16px,2vw,24px)); max-width: none;
               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; }
  /* 19.08.2026 (Yanick, mobil auf den Ads-LPs): „bei bewertungen sind die bilder etwas
     klein. das sollte oben schon den ganzen block ausfuellen und kann unten auch naeher
     an die sterne gehen."
     🔴 Die Zeile darueber war der Grund: `padding: 16px` ueberschreibt das
     `padding-top: 0` von .b-rev--bild (gleiche Spezifitaet, spaeter im Stylesheet), und
     zwar NUR mobil. Gemessen auf 390 px: 17 px Luft ueber dem Foto, wo keine hingehoert.
     Dazu wird das Bild hoeher: die Kundenfotos sind hochkant oder quadratisch (gemessen
     720x1561 / 720x960), 16:10 hat sie brutal beschnitten. 4:3 zeigt mehr vom Relief und
     fuellt den Kartenkopf, ohne das Zitat zu verdraengen. Der Abstand nach unten geht von
     14 auf 10 px — naeher an die Sterne, wie gewuenscht. */
  .awx .b-rev--bild { padding-top: 0; }
  .awx .b-rev--bild .b-rev__foto { aspect-ratio: 4/3; margin-bottom: 10px;
    /* Sobald das Bild oben buendig sitzt, stoesst seine eckige Kante an die
       abgerundete Kartenecke (Karte 10 px, Bild 0 — gemessen, die Ecke stand ueber).
       Es uebernimmt die Rundung deshalb oben, abzueglich der 1-px-Kartenkante. */
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; }
  .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). */
  /* v14.08 (Stephan: "die erste seite muss knallen … das muss auf die dynamische mobile
     groesse skaliert werden … komplett bildschirm fuellend", Verweis auf die Startseite):
     Dort loest es der image-banner mit `min-height: calc(100svh - Kopf)` — svh statt vh,
     weil vh auf Mobilgeraeten die eingeklappte Adressleiste mitrechnet und der Block beim
     Scrollen springt. Dasselbe Muster hier: der Hero fuellt genau EINEN Bildschirm, abzueglich
     der Kopfleiste und der Trust-Zeile, die direkt darunter haengt (beides misst aw_sections.js
     und legt es als --aw-kopf-h / --aw-trust-h ab; die Fallbacks halten das Layout, falls das
     JS nicht laeuft).
     Verteilt wird die Hoehe wie auf der Startseite: der Textblock unten nimmt, was er braucht,
     das Bild bekommt den Rest (flex: 1) — dadurch ist es auf hohen Geraeten groesser statt
     auf allen gleich hoch. */
  .awx .lp-hero {
    flex-direction: column; align-items: stretch; background: var(--felsgestein);
    min-height: calc(100svh - var(--aw-kopf-h, 56px) - var(--aw-trust-h, 0px));
    height: auto;
  }
  /* 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%)
     v14.08: aus der festen Hoehe wird eine Mindesthoehe plus Wachstum — das Bild bekommt den
     Rest, den der Textblock uebrig laesst. Das Minimum liegt bei 24svh und nicht hoeher:
     bei 34svh war die Summe aus Bild und Text auf 844 px hoehen Geraeten 16 px groesser als
     der Bildschirm (gemessen), der Hero waere also wieder ueber die Kante gewachsen.
     Auf sehr niedrigen Geraeten gewinnt das Minimum — lieber ein sichtbares Bild als
     exakt eine Bildschirmhoehe mit Briefmarke. */
  .awx .lp-hero__bg { position: relative; inset: auto; width: 100%; flex: 1 1 auto; min-height: 24svh; transform: none !important; overflow: hidden; }
  /* v14.08 — Bildausschnitt mobil, in zwei Runden mit Yanick geklaert:
     Das Track-Foto ist QUADRATISCH (408x408), der Bildrahmen mobil breiter als hoch
     (gemessen 430x387). `cover` skaliert auf die Breite; die ueberstehenden 43 px werden
     verteilt. Erst nach oben geschoben (50% 0) — dann sass das Relief zu tief im Rahmen.
     Zurueck auf zentriert, und das ist auch sachlich richtig: das Motiv liegt zwischen
     7 % und 95 % der Bildhoehe, bei mittigem Schnitt fehlen oben und unten je 22 px, also
     nur Wald und Boden — das Relief bleibt vollstaendig.
     🔑 Was nach „oben abgeschnitten" aussah, war der Hintergrund, nicht das Produkt.
     Explizit notiert statt weggelassen, damit die Entscheidung sichtbar bleibt. */
  .awx .lp-hero__bg img { transform: none !important; object-position: 50% 50%; }
  .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; }
/* 05.11.2026 (Greta, /fr-fr: die Akzente von „À PORTÉE“ stießen von unten in „MONTAGNES,“, gemessen −3,7 px bei 1280, −2,9 px bei 390): Zeilenhöhe
   .98 plus 8 px, damit zwischen jedem Zeichen und der Zeile darüber mindestens 4 px Luft bleiben (alle Märkte, 320 bis 1920 px, Suite S9). */
.awx .lp-hero h1 { font-size: var(--fs-display); line-height: calc(.98em + 8px); letter-spacing: -.03em; margin: 14px 0 0; }   /* v3 05.11.2026: 4 px weniger, die neue Zeilenhöhe bringt 4 px Halbdurchschuss über der ersten Zeile */
.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: 22px; }   /* v3 05.11.2026: 26 auf 22, Halbdurchschuss unter der H1 */
.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: 8px; }   /* v3 05.11.2026: 12/16/24 auf 8/12/16, Knopf mobil nicht tiefer als vor der neuen Zeilenhöhe */
  .awx .lp-hero p.lead { font-size: 1.6rem; margin-top: 12px; }
  .awx .lp-hero__cta { margin-top: 16px; 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; }
/* v14.08 (im Zug mit dem Header-CTA, Yanick "zu viel gelb oben und unten"): Der Knopf in
   der Kaufleiste hatte denselben Gold-Ueberschuss wie der Header-Knopf — 36 px Flaeche um
   eine 14-px-Zeile (61 % Gold) — und war mit 36 px zugleich UNTER dem 44-px-Touch-Ziel.
   Beides in einem: sichtbar 32 px, Trefferflaeche 44 px als unsichtbares Feld darueber.
   Schrift unveraendert. */
.awx .lp-sticky .btn { position: relative; flex: none; white-space: nowrap; padding: 8px 16px; font-size: var(--fs-14); }
.awx .lp-sticky .btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.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); }
/* v6.168 (Yanick 19.08.: „im checkout ist ein block in gelb und der text weiss"):
   Die Fläche ist --aw-accent-wash-soft, in der hellen Cart-Insel also gelb (#FFF2CE).
   Icon/Text/CTA standen darauf in --bergsonne bzw. --alpenlicht — und --alpenlicht wird
   in der Insel (aw_tokens.css: `html[data-theme="light"] [data-theme="light"]`) bewusst
   auf ROH-Weiss zurückgesetzt. Gemessen am gerenderten DOM: Text 1.06:1, Icon/CTA 1.12:1.
   Auf einer Akzentfläche gilt dieselbe Regel wie überall: dunkler Vordergrund. */
.awx .cart-duo__ico { width: 30px; height: 30px; flex: none; color: var(--aw-on-accent); }
.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(--aw-on-accent) 82%, transparent); }
.awx .cart-duo__cta { flex: none; padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--aw-on-accent); color: var(--aw-on-accent); 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(--aw-on-accent); color: var(--bergsonne); }
@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; }
/* v6.168: Der Kreis IST eine Akzentfläche (--aw-accent-wash = volles Bergsonne im Hell),
   das Icon darauf gehört damit auf --aw-on-accent (vorher --accent-text, gemessen 2.48:1). */
.awx .ci--engrave svg { width: 20px; height: 20px; color: var(--aw-on-accent); }
.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(64px, calc(11vh - 32px), 96px); padding-bottom: clamp(24px, 4vh, 48px); }   /* v3 05.11.2026: 32 px weniger über der Dachzeile, der Knopf bleibt bei 1440 x 900 im ersten Schirm (Greta) */
}
/* 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; }
/* Mobil standen die drei Pillen untereinander (Stephan 11.08.: "Bullets nebeneinander").
   Sie sind span/inline-flex und brechen um, sobald eine nicht mehr in die Zeile passt —
   bei 412 px war jede einzelne breit genug dafuer. Kompaktere Schrift, engeres Padding
   und kleinere Icons bringen sie in zwei Zeilen statt drei; flex-wrap haelt sie zentriert. */
@media (max-width: 560px) {
  .awx .trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .awx .trust-strip .pill { font-size: var(--fs-12); padding: 6px 12px; gap: 6px; }
  .awx .trust-strip .pill svg { width: 14px; height: 14px; }
}

/* v14.08 (Stephan, mit Markierung im Screenshot: "also die noch in den schwarzen bereich"):
   Die Trust-Zeile stand mobil auf hellem Grund und riss den Hero eine Zeile zu frueh ab —
   der erste Bildschirm endete mit einem weissen Balken. Sie gehoert optisch zum Hero, also
   bekommt sie DESSEN Fundament und haengt ohne Fuge daran. Der Hero rechnet ihre Hoehe
   heraus (--aw-trust-h), damit beide zusammen genau einen Bildschirm fuellen.
   Nur mobil: auf Desktop bleibt die Leiste, wie sie ist. */
@media (max-width: 860px) {
  /* ⚠️ NICHT var(--felsgestein): der Hero traegt data-theme="dark", die Trust-Section liegt
     ausserhalb dieser Insel — dort ist --felsgestein die HELLE Farbe (Token-Tausch bei
     data-theme="light"). Beim ersten Versuch stand die Leiste deshalb weiter in Creme
     (gemessen rgb(255,251,247)). Der Roh-Token kippt nicht. */
  .awx .shopify-section:has(.lp-hero) + .shopify-section:has(.b-sec--strip) {
    background: var(--aw-ci-felsgestein, #1E1E1C);
  }
  .awx .shopify-section:has(.lp-hero) + .shopify-section:has(.b-sec--strip) .b-sec--strip {
    padding-block: 0 clamp(14px, 3.5vw, 20px);
    border-top: 0;
  }
  /* Die Pills stehen jetzt auf dunklem Grund — auch hier die nicht tauschbaren Tokens,
     aus demselben Grund wie beim Fundament darueber. */
  .awx .shopify-section:has(.lp-hero) + .shopify-section:has(.b-sec--strip) .pill {
    background: color-mix(in srgb, var(--aw-ci-alpenlicht, #FFFBF7) 10%, transparent);
    border-color: color-mix(in srgb, var(--aw-ci-alpenlicht, #FFFBF7) 22%, transparent);
    color: color-mix(in srgb, var(--aw-ci-alpenlicht, #FFFBF7) 86%, transparent);
  }
  .awx .shopify-section:has(.lp-hero) + .shopify-section:has(.b-sec--strip) .pill--gold {
    background: var(--bergsonne); border-color: var(--bergsonne); color: var(--aw-on-accent);
  }
}
/* 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. */
/* Trennung NUR fuer wirklich lange Woerter: ohne Limit trennt der Browser auch
   "SUP-PORT" und "VER-ARBEITUNG" (Stephan 11.08.: "nicht so viele Zeilenumbrueche mit
   Bindestrichen"). 12 5 4 heisst: erst ab 12 Zeichen Wortlaenge trennen, mindestens
   5 Zeichen vor und 4 nach dem Strich — "Qualitaets-versprechen" ja, "Sup-port" nein. */
.awx.b h3 { hyphens: auto; overflow-wrap: normal;
            -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 4;
            hyphenate-limit-chars: 12 5 4; }

/* 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; }
}

/* Presse-Band: die Ueberschrift ist eine Einordnung, kein Kapitel — sie soll die
   Logos ankuendigen, nicht mit ihnen konkurrieren (Stephan 12.08.: "bissl kleiner").
   Eine Stufe unter der normalen Section-h2, Zeilenhoehe mit. */
.awx .aw-section-logomarquee .b-shead h2, .awx .aw-section-logo-marquee .b-shead h2, .awx section:has(> .wrap > .b-shead + .aw-marquee) .b-shead h2 {
  /* rem-Basis ist 10 px (Dawn html 62,5 %) — 4rem sind also 40 px, nicht 64. */
  font-size: clamp(2.8rem, 3.2vw, 4rem); line-height: 1.15; }


/* Co-Branding-Lockup im Hero (additiv 03.09.2026, Mayrhofen Ultraks): alpen-werk x Partner */
.lp-hero__partner{display:flex;align-items:center;gap:22px;margin:0 0 14px}
.lp-hero__partner img{width:auto;display:block}
.lp-hero__partner .lp-hero__partner-a{height:66px;opacity:1}
.lp-hero__partner .lp-hero__partner-b{height:50px}
.lp-hero__partner .x{font-family:var(--font-sans);font-size:24px;font-weight:300;color:#fff;opacity:.45;line-height:1}
.lp-hero__partner-label{display:block;font-family:var(--font-sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#fff;opacity:.8;margin:0 0 16px}
@media (max-width:860px){
  .lp-hero__partner{gap:12px;margin-bottom:10px}
  .lp-hero__partner .lp-hero__partner-a{height:48px}
  .lp-hero__partner .lp-hero__partner-b{height:36px}
  .lp-hero__partner-label{font-size:10px;letter-spacing:.15em;margin-bottom:14px}
}

/* Preis bricht mobil zwischen Zahl und Euro (03.09.2026, an der Mayrhofen-LP gesehen): die Karte ist schmal, der Zeilenumbruch trennt „109,90“ und „€“. */
.awx .lp-card__price, .awx .lp-card__price .glc-money { white-space: nowrap; }


/* Sticky-CTA mit zwei Wegen (03.09.2026): auf 390 px schob der Linien-Name in fs-24 mit
   white-space:nowrap den Knopf aus dem Bild. Der Name darf jetzt kürzen, der Preis wird
   die tragende Zeile, und beide Knöpfe stehen nebeneinander. */
.awx .lp-sticky__ctas { display: flex; gap: 8px; flex: none; }
.awx .lp-sticky__alt { background: transparent; border: 1px solid var(--border-mid); color: var(--alpenlicht); }
.awx .lp-sticky__alt:hover { border-color: var(--alpenlicht); }
@media (max-width: 560px) {
  .awx .lp-sticky__row { gap: 10px; }
  .awx .lp-sticky__price { min-width: 0; flex: 1 1 auto; }
  .awx .lp-sticky__price b { font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .awx .lp-sticky__price small { font-size: var(--fs-16); color: var(--alpenlicht); font-weight: 600; }
  .awx .lp-sticky .btn { padding: 8px 11px; font-size: var(--fs-13); }
}