/** Shopify CDN: Minification failed

Line 442:8 Expected identifier but found whitespace
Line 442:9 Unexpected "var("
Line 464:10 Expected identifier but found whitespace
Line 464:15 Unexpected ";"

**/
/* ============================================================
   aw_kit_port.css — Redesign-Atome (Tokens + Kit) fuers LIVE-Theme
   GENERIERT via tools/build_kit_port.py aus frontend_redesign main
   (aw_tokens.css + aw_kit.css + aw_dawn_bridge.css) — NICHT von Hand
   editieren, sondern Quelle aktualisieren + Generator neu laufen lassen.
   Nutzung: <div class="awx b" data-theme="light">...</div>.
   Das data-theme gehoert DAZU: die Redesign-Seiten laufen in der hellen
   Farbwelt (html[data-theme="light"]), die die Basistoken --felsgestein/
   --alpenlicht TAUSCHT. Ohne das Attribut bleibt die Insel im Dark-Kanon
   und `body { background: var(--bg) }` malt einen dunklen Grund unter
   dunklen Text — gemessen: #1E1E1C auf #252523, Kontrast ~1:1.
   Section-Styles (Redesign-Sections) liegen in aw_lp_port.css.
   ============================================================ */

/* ==================== TOKENS (gescopet) ==================== */
/* === PORT aus Design-Export tokens.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 — Design Tokens (SINGLE SOURCE OF TRUTH)
   Token-Namen 1:1 wie Design-System `colors_and_type.css` (Shopify-ready).
   Werte = kanonische 5 CI-Farben + color-mix()-Ableitungen, KEINE neuen Hex.
   "PROJECT EXTENSIONS" unten = abgeleitete Zusatz-Tokens für diese Templates
   (bergsonne-dark, alpenholz-15/30, border-mid, shadow-xl, fs-120, space-32).
   Beim Theme-Build: diese Datei → Shopify `assets/`, via theme.liquid laden.
   ========================================================================== */



/* BUILD-SCHRITT (Theme): Author-Schnitte nach woff2 (+woff) konvertieren — OTF ist ~55-60% größer.
   Bis dahin bleiben die lizenzierten OTF-Quellen eingebunden. */






/* --- Fallback-Metriken gegen FOUT-/Layout-Sprung (size-adjust) ---
   Belegen ~denselben Platz wie die Echt-Fonts, bis diese geladen sind. */



.awx {
  --aw-error: #C0392B; /* v4.62: zentrale Fehlerfarbe (Formular-Validierung) */
  /* ---- Brand colors (canonical, only these 5 + derivations) ---- */
  --felsgestein: #1E1E1C;
  --alpenlicht:  #FFFBF7;
  --bergsonne:   #FFE591;
  --steinlicht:  #CFCCC9;
  --alpenholz:   #A78F7F;

  /* ---- v4.72 PRODUKTFARB-TOKENS (Audit 12.07.2026) ----
     EINE Wahrheit fuer die PLA-Produktfarben (Konfigurator-Dock .d-swatch,
     Landing-Track-Swatches, Farbkombi-Pills) statt drei divergenter Paletten.
     Kanonisch = aw_stage.css .d-swatch-Palette; Rot = Konfigurator-Track-Swatch.
     Bewusst KEINE CI-Farben und KEIN data-theme-Flip — sie zeigen physisches
     Druckmaterial. */
  --sw-weiss:     #F4F1EC;
  --sw-hellgrau:  #BFB8AE;
  --sw-anthrazit: #4A4742;
  --sw-schwarz:   #211E1B;
  --sw-rot:       #C23030;

  /* v4.72: Leaflet-Karten-Grund im Stage-Konfigurator — bewusst DUNKLER als
     --felsgestein (#1E1E1C), damit sich die Map-Tiles auf der Buehne absetzen. */
  --stage-map-bg: #0D0D0C;

  /* Derived neutrals (mixes, NOT new colors).
     Safari <16.4 kann kein color-mix(in oklch): je Token steht ein statischer
     Fallback-Hex (vorberechneter Mix, KEINE neue Farbe) VOR der Mix-Zeile —
     ungültige Deklaration wird verworfen, der Fallback gewinnt. */
  --felsgestein-90: #343432;
  --felsgestein-90: color-mix(in oklch, var(--felsgestein) 90%, var(--alpenlicht));
  --felsgestein-70: #62605E;
  --felsgestein-70: color-mix(in oklch, var(--felsgestein) 70%, var(--alpenlicht));
  --felsgestein-55: #83817F;
  --felsgestein-55: color-mix(in oklch, var(--felsgestein) 55%, var(--alpenlicht));
  --felsgestein-30: #BCB9B5;
  --felsgestein-30: color-mix(in oklch, var(--felsgestein) 30%, var(--alpenlicht));
  --steinlicht-60:  #E2DFDB;
  --steinlicht-60:  color-mix(in oklch, var(--steinlicht) 60%, var(--alpenlicht));
  --steinlicht-40:  #ECE8E5;
  --steinlicht-40:  color-mix(in oklch, var(--steinlicht) 40%, var(--alpenlicht));
  /* ---- PROJECT EXTENSIONS (nicht im DS-Stylesheet; abgeleitet, keine neuen Hex) ---- */
  /* v4.73 (Stephan 13.07.): gegen das ROH-Hell mischen, nicht gegen --alpenlicht.
     Sonst kippen diese HELLEN Gold-Tints im Hell-Switch (alpenlicht->dunkel) selbst auf
     DUNKEL — das machte den gewaehlten Option-Chip (.opt bg:--bergsonne-20) dunkel-auf-dunkel. */
  --bergsonne-40:   #FFF2CE;
  --bergsonne-40:   color-mix(in oklch, var(--bergsonne) 40%, var(--aw-ci-alpenlicht, #FFFBF7));
  --bergsonne-20:   #FFF7E3;
  --bergsonne-20:   color-mix(in oklch, var(--bergsonne) 20%, var(--aw-ci-alpenlicht, #FFFBF7));
  --bergsonne-dark: #AE9143;
  --bergsonne-dark: color-mix(in oklch, var(--bergsonne) 62%, var(--felsgestein));
  --alpenholz-30:   #E5DBD3;
  --alpenholz-30:   color-mix(in oklch, var(--alpenholz) 30%, var(--alpenlicht));
  --alpenholz-15:   #F2EBE5;
  --alpenholz-15:   color-mix(in oklch, var(--alpenholz) 15%, var(--alpenlicht));
  --border-mid:     rgba(255, 251, 247, 0.12); /* dark-mode hairline */
  --border-mid-strong: rgba(255, 251, 247, 0.22);

  /* v19.07 (Stephan): EINE Wahrheit fuer ALLE Bewertungs-Sterne — sattes „Amazon-Gold".
     Bewusst KEIN CI-Token und KEIN data-theme-Flip: Sterne sind IMMER gold, in BEIDEN
     Farbwelten identisch. Kraeftiger/gesaettigter als --bergsonne (#FFE591 wirkt auf
     Creme washed-out). Wird von keinem Flip-Block (light/dark) ueberschrieben. */
  --aw-star: #F5A623;

  /* Semantic — light default */
  --bg:            var(--alpenlicht);
  --bg-subtle:     var(--steinlicht-40);
  --bg-muted:      var(--steinlicht-60);
  --surface:       var(--alpenlicht);
  --fg:            var(--felsgestein);
  /* v18.07d Kontrast (Stephan 18.07.2026, Zielgruppe 50+): muted/subtle kraeftiger,
     Ziel ~7:1 statt der alten 4-6:1. --fg-subtle war 4.26:1 (unter WCAG 4.5). */
  --fg-muted:      #51504D;
  --fg-muted:      color-mix(in oklch, var(--felsgestein) 74%, var(--alpenlicht)); /* ~7.8:1 */
  --fg-subtle:     #62615E;
  --fg-subtle:     color-mix(in oklch, var(--felsgestein) 66%, var(--alpenlicht)); /* ~6.0:1 */
  --fg-faint:      var(--felsgestein-30);
  --border:        var(--steinlicht);
  --border-strong: var(--felsgestein-30);
  --accent:        var(--bergsonne);
  --accent-ink:    var(--felsgestein);
  /* Akzent als TEXT/ICON: auf hellem Grund abgedunkelt (Kontrast), auf dunklem pur.
     Regel: Bergsonne pur nur als Fläche oder auf Felsgestein — nie als Text auf Alpenlicht. */
  --accent-text:   var(--bergsonne-dark);
  --wood:          var(--alpenholz);

  /* Type */
  --font-display:      'Compadre', 'CompadreFallback', 'Cormorant Garamond', Georgia, serif;
  --font-serif:        'Compadre', 'CompadreFallback', 'Cormorant Garamond', Georgia, serif;
  --font-serif-narrow: 'Compadre Narrow', 'Compadre', 'CompadreFallback', Georgia, serif; /* DS name */
  --font-narrow:       var(--font-serif-narrow); /* back-compat alias */
  --font-sans:         'Author', 'AuthorFallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale */
  /* v6.120 (29.07.): --fs-11 ist 1.2rem — die kleinste Stufe im Shop ist 12 px, nicht 11.
     Gemessen waren ~140 Textstellen auf 11 px (Menue-Beschreibungen, Suchtreffer-Typ,
     small, Kicker, Badges). Fuer eine Zielgruppe bis 60+ ist das an der Grenze, und der
     Aufwand-Nutzen einer Einzelfall-Liste ist schlecht: EIN Token hebt alle. Der Name
     bleibt (sonst 140 Fundstellen anfassen), die Bedeutung ist jetzt „kleinste Stufe". */
  --fs-11: 1.2rem; --fs-12: 1.2rem; --fs-13: 1.3rem; --fs-14: 1.4rem;
  --fs-15: 1.5rem; --fs-16: 1.6rem;    --fs-18: 1.8rem;  --fs-20: 2rem;
  --fs-24: 2.4rem;    --fs-32: 3.2rem;    --fs-44: 4.4rem;   --fs-64: 6.4rem;
  --fs-88: 8.8rem;    --fs-120: 12rem;

  /* Display-Skala (EINE Quelle für Hero-H1 + Section-H2 — statt ad-hoc-clamps) */
  --fs-display:    clamp(3.84rem, 6vw, 8rem);      /* Hero-H1 (lp-hero) */
  --fs-display-lg: clamp(4.16rem, 7.5vw, 10.4rem);  /* Event-/Takeover-Hero */
  --fs-h2-display: clamp(3.52rem, 5.5vw, 6.72rem);  /* Section-Headline (b-shead) */
  --fs-h2-split:   clamp(3.04rem, 4vw, 4.96rem);    /* Split-/Story-Headline */

  --lh-tight: 1.08; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:12px; --radius-pill:999px;

  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);

  --shadow-xs: 0 1px 0 rgba(30,30,28,.04);
  --shadow-sm: 0 1px 2px rgba(30,30,28,.04), 0 1px 1px rgba(30,30,28,.03);
  --shadow-md: 0 4px 12px rgba(30,30,28,.06), 0 1px 2px rgba(30,30,28,.04);
  --shadow-lg: 0 12px 32px rgba(30,30,28,.08), 0 2px 6px rgba(30,30,28,.04);
  --shadow-xl: 0 24px 60px rgba(30,30,28,.12), 0 6px 16px rgba(30,30,28,.06);

  /* Dark-Shadow-Set (für Karten/Bühnen auf Felsgestein — Light-Shadows tragen dort nicht) */
  --shadow-dark-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-dark-xl: 0 48px 110px rgba(0, 0, 0, 0.55);

  /* Layout */
  --content-max: 1280px;   /* EINE Content-Maxbreite — Header/Footer/Sections bündig */
  --content-narrow: 720px;
  --sticky-h: 76px;        /* Höhe der mobilen Sticky-CTA (body-Kompensation) */

  --ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* ---- v6.117 AKZENT-FLAECHEN + LOGO-FILTER (29.07.2026) ----
     WARUM: "wenig Gold auf var(--felsgestein)" war 12x als Icon-Kreis/Hinweisflaeche
     gebaut. Im Light-Flip ist --felsgestein HELL -> der Kreis wird zu rgb(254,248,231)
     gegen eine Karte rgb(248,244,240) = Kontrast 1.03, die Flaeche verschwindet
     (Stephan 29.07.: "icons - kontrast schlecht"). Gleiche Klasse wie die Preise am
     28.07. Darum EIN Token je Rolle, das in BEIDEN Farbwelten sichtbar ist —
     nicht 12 Einzelwerte.
       --aw-accent-wash       = Traeger fuer Icons (Kreise/Pucks), kraeftig
       --aw-accent-wash-soft  = flaechiger Hinweis/Aktiv-Zustand, dezent
       --aw-logo-filter       = Fremdlogo-Einfaerbung (mono), folgt der Farbwelt;
                                hart "brightness(0) invert(1)" machte JEDES Logo weiss
                                -> auf hellen Karten unsichtbar (Stephan: "logos kein kontrast")
     Default = Dark-Kanon (html[data-theme=dark]); die Flips stehen unten je Farbwelt. */
  --aw-accent-wash:      color-mix(in oklch, var(--bergsonne) 16%, var(--felsgestein));
  --aw-accent-wash-soft: color-mix(in oklch, var(--bergsonne) 12%, var(--felsgestein));
  --aw-logo-filter:      brightness(0) invert(1);

  /* ---- v6.119 TEXT AUF AKZENTFLAECHE (29.07.2026) ----
     Gold ist in BEIDEN Farbwelten dieselbe helle Flaeche — Text darauf muss also
     IMMER dunkel sein. Gebaut war stattdessen 46x `background: var(--bergsonne);
     color: var(--felsgestein)`, und --felsgestein ist im Light HELL: weiss auf Gold.
     Dagegen stand bisher eine Ausnahmeliste mit 8 Selektoren weiter unten — jeder
     neue Gold-Button muss daran denken, und genau das ist schiefgegangen (B2B-Badge
     „Beliebteste Anfrage", gemessen 1.21:1). Ein Token statt einer Liste: wer eine
     Akzentflaeche baut, nimmt --aw-on-accent und kann den Fehler nicht mehr machen.
     Im Dark ist der Wert identisch zu --felsgestein, dort aendert sich nichts. */
  --aw-on-accent: var(--aw-ci-felsgestein, #1E1E1C);
}

/* ---- Dark theme — invert via existing tokens, no new hex ----
   data-theme="dark" gehört auf <html> (Seiten-Modus) oder auf eine Insel
   (z. B. helles PDP-Cockpit via data-theme="light"). Hex-Fallbacks wie oben. */
.awx [data-theme="dark"] {
  --bg:            var(--felsgestein);
  --bg-subtle:     #30302E;
  --bg-subtle:     color-mix(in oklch, var(--felsgestein) 92%, var(--alpenlicht));
  --bg-muted:      #403F3D;
  --bg-muted:      color-mix(in oklch, var(--felsgestein) 85%, var(--alpenlicht));
  --surface:       #2C2B29;
  --surface:       color-mix(in oklch, var(--felsgestein) 94%, var(--alpenlicht));
  --fg:            var(--alpenlicht);
  --fg-muted:      #CECAC7;
  --fg-muted:      color-mix(in oklch, var(--alpenlicht) 78%, var(--felsgestein));
  --fg-subtle:     var(--steinlicht);
  --fg-faint:      #6D6B69;
  --fg-faint:      color-mix(in oklch, var(--alpenlicht) 35%, var(--felsgestein));
  --border:        var(--border-mid);
  --border-strong: #62605E;
  --border-strong: color-mix(in oklch, var(--alpenlicht) 30%, var(--felsgestein));
  --accent-ink:    var(--felsgestein);
  --accent-text:   var(--bergsonne);
}

/* ---- v2.7 FARBWELT-SWITCH (Editor-Setting aw_farbwelt) ----
   Das Section-CSS nutzt --felsgestein/--alpenlicht vielfach DIREKT als Flaeche/Text.
   Ein echtes Light-Theme entsteht darum durch Tausch der beiden Basistoken
   (Rohwerte kommen als --aw-ci-* aus theme.liquid). Gepinnte Inseln
   (data-theme="dark" auf Hero/3D-Stage bzw. data-theme="light") setzen die
   Basistoken explizit zurueck und funktionieren so in BEIDEN Seiten-Modi.
   Bekannter Kompromiss: statische color-mix-Fallback-Hexes (alte Safari) bleiben
   dark-basiert. */
.awx[data-theme="light"] {
  --felsgestein: var(--aw-ci-alpenlicht, #FFFBF7);
  --alpenlicht:  var(--aw-ci-felsgestein, #1E1E1C);
  --border-mid: rgba(30, 30, 28, 0.14);
  --border-mid-strong: rgba(30, 30, 28, 0.26);
  --shadow-dark-lg: var(--shadow-lg);
  --shadow-dark-xl: var(--shadow-xl);
  /* Semantik auf ROH-Werte mappen — die Basistoken sind oben getauscht,
     ueber sie gemappte Semantik wuerde sonst auf die falsche Seite zeigen */
  --bg:            var(--aw-ci-alpenlicht, #FFFBF7);
  --bg-subtle:     #ECE8E5;
  --bg-subtle:     color-mix(in oklch, var(--steinlicht) 40%, var(--aw-ci-alpenlicht));
  --bg-muted:      #E2DFDB;
  --bg-muted:      color-mix(in oklch, var(--steinlicht) 60%, var(--aw-ci-alpenlicht));
  --surface:       var(--aw-ci-alpenlicht, #FFFBF7);
  --fg:            var(--aw-ci-felsgestein, #1E1E1C);
  /* v18.07d Kontrast: muted 70->74 %, subtle 55->66 % (war 4.26:1, jetzt ~6.0:1). */
  --fg-muted:      #51504D;
  --fg-muted:      color-mix(in oklch, var(--aw-ci-felsgestein) 74%, var(--aw-ci-alpenlicht)); /* ~7.8:1 */
  --fg-subtle:     #62615E;
  --fg-subtle:     color-mix(in oklch, var(--aw-ci-felsgestein) 66%, var(--aw-ci-alpenlicht)); /* ~6.0:1 */
  --fg-faint:      #BCB9B5;
  --fg-faint:      color-mix(in oklch, var(--aw-ci-felsgestein) 30%, var(--aw-ci-alpenlicht));
  --border:        var(--steinlicht);
  --border-strong: #BCB9B5;
  --border-strong: color-mix(in oklch, var(--aw-ci-felsgestein) 30%, var(--aw-ci-alpenlicht));
  --accent-ink:    var(--aw-ci-felsgestein, #1E1E1C);
  /* bergsonne-dark auf ROH-Werte mixen — der normale Mix haengt an --felsgestein,
     die im Light-Flip hell ist (sonst wird das "dunkle" Gold hell) */
  --bergsonne-dark: #AE9143;
  --bergsonne-dark: color-mix(in oklch, var(--bergsonne) 62%, var(--aw-ci-felsgestein, #1E1E1C));
  /* Akzent-TEXT/-Icons im Hell-Modus: monochrom Felsgestein (Stephan 11.07.: abgedunkeltes
     Gelb wirkt braun) — Gold bleibt Flaechen (CTA/Pills/Badges) und dem Dark-Kanon */
  --accent-text:   var(--aw-ci-felsgestein, #1E1E1C);
  /* v6.117: Der Icon-Kreis IST eine Akzentflaeche — im Hell also volles Bergsonne
     (wie CTA/Pill/Badge), mit dunklem Icon darauf. Ein 16-%-Schleier auf hellem
     Grund ist keine Flaeche, sondern Nichts (gemessen 1.03:1). */
  --aw-accent-wash:      var(--bergsonne);
  --aw-accent-wash-soft: #FFF2CE;
  --aw-accent-wash-soft: color-mix(in oklch, var(--bergsonne) 42%, var(--aw-ci-alpenlicht, #FFFBF7));
  --aw-logo-filter:      brightness(0);
}
/* Akzent-Flaechen behalten IMMER dunklen Text — hartes color: var(--felsgestein)
   in Button-/Chip-Styles wuerde nach dem Basistausch hell-auf-gelb werden */
.awx[data-theme="light"] .btn--cta, .awx[data-theme="light"] .btn--accent, .awx[data-theme="light"] .awc-cta, .awx[data-theme="light"] .pill--gold, .awx[data-theme="light"] .lp-card__badge, .awx[data-theme="light"] .lp-card:hover .lp-card__go, .awx[data-theme="light"] .engraving-confirm-overlay .engraving-confirm-btn--confirm, .awx[data-theme="light"] cart-drawer .cart__checkout-button {
  color: var(--aw-ci-felsgestein, #1E1E1C);
}
.awx [data-theme="dark"] {
  --felsgestein: var(--aw-ci-felsgestein, #1E1E1C);
  --alpenlicht:  var(--aw-ci-alpenlicht, #FFFBF7);
  --border-mid: rgba(255, 251, 247, 0.12);
  --border-mid-strong: rgba(255, 251, 247, 0.22);
  --shadow-dark-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-dark-xl: 0 48px 110px rgba(0, 0, 0, 0.55);
  /* v6.117: dunkle Insel in heller Seite — Akzentflaechen/Logos zurueck auf Dark-Kanon */
  --aw-accent-wash:      color-mix(in oklch, var(--bergsonne) 16%, var(--aw-ci-felsgestein, #1E1E1C));
  --aw-accent-wash-soft: color-mix(in oklch, var(--bergsonne) 12%, var(--aw-ci-felsgestein, #1E1E1C));
  --aw-logo-filter:      brightness(0) invert(1);
}
.awx [data-theme="dark"] [data-theme="light"], .awx[data-theme="light"] [data-theme="light"] {
  --felsgestein: var(--aw-ci-felsgestein, #1E1E1C);
  --alpenlicht:  var(--aw-ci-alpenlicht, #FFFBF7);
  --border-mid: rgba(30, 30, 28, 0.14);
  --border-mid-strong: rgba(30, 30, 28, 0.26);
}

/* Helle Insel in dunkler Seite (PDP-Cockpit): expliziter Re-Flip auf Light-Werte */
.awx [data-theme="light"] {
  --bg:            var(--alpenlicht);
  --bg-subtle:     var(--steinlicht-40);
  --bg-muted:      var(--steinlicht-60);
  --surface:       var(--alpenlicht);
  --fg:            var(--felsgestein);
  /* v18.07d Kontrast: Insel erbt die kraeftigeren muted/subtle-Werte (Ziel ~7:1). */
  --fg-muted:      #51504D;
  --fg-muted:      color-mix(in oklch, var(--felsgestein) 74%, var(--alpenlicht));
  --fg-subtle:     #62615E;
  --fg-subtle:     color-mix(in oklch, var(--felsgestein) 66%, var(--alpenlicht));
  --fg-faint:      var(--felsgestein-30);
  --border:        var(--steinlicht);
  --border-strong: var(--felsgestein-30);
  --accent-ink:    var(--felsgestein);
  --accent-text:   var(--bergsonne-dark);
  /* v6.117: helle Insel — Akzentflaeche = volles Gold, Fremdlogos monochrom dunkel */
  --aw-accent-wash:      var(--bergsonne);
  --aw-accent-wash-soft: #FFF2CE;
  --aw-accent-wash-soft: color-mix(in oklch, var(--bergsonne) 42%, var(--alpenlicht));
  --aw-logo-filter:      brightness(0);
}

/* ---- Base ---- */
.awx *, .awx *::before, .awx *::after { box-sizing: border-box; }
.awx { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
.awx {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
}
.awx img { display: block; max-width: 100%; }
.awx a { color: inherit; }

.awx h1, .awx h2, .awx h3, .awx h4, .awx h5, .awx h6 { margin:0; font-family: var(--font-serif); font-weight:400; letter-spacing: 0; line-height: var(--lh-snug); }
.awx h1 { font-size: var(--fs-44); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.awx h2 { font-size: var(--fs-32); }
.awx h3 { font-size: var(--fs-24); }

.awx p { margin: 0 0 var(--space-4); line-height: var(--lh-relaxed); text-wrap: pretty; }

.awx .eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-12);
  font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fg-muted);
}
.awx .mono { font-family: var(--font-mono); }
.awx .italic-display { font-style: italic; font-family: var(--font-serif); }
.awx .tnum { font-variant-numeric: tabular-nums; }

.awx .brand-claim {
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-muted); line-height: 1.4; letter-spacing: 0.005em;
}

.awx ::selection { background: var(--bergsonne); color: var(--aw-on-accent); }

@media (prefers-reduced-motion: reduce) {
  .awx *, .awx *::before, .awx *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .awx { scroll-behavior: auto; }
}


/* dark-Basistoken-Pin (Insel malt eigenen Grund, unabhaengig vom Wrapper) */
.awx [data-theme="dark"], .awx[data-theme="dark"] {
  --felsgestein: var(--aw-ci-felsgestein, #1E1E1C);
  --alpenlicht:  var(--aw-ci-alpenlicht, #FFFBF7);
  --border-mid: rgba(255, 251, 247, 0.12);
  --border-mid-strong: rgba(255, 251, 247, 0.22);
}

/* ---- Basis (gescopet) ---- */
.awx, .awx *, .awx *::before, .awx *::after { box-sizing: border-box; }
.awx { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.awx img { display: block; max-width: 100%; }
.awx a { color: inherit; }
.awx h1, .awx h2, .awx h3, .awx h4, .awx h5, .awx h6 { margin:0; font-family: var(--font-serif); font-weight:400; letter-spacing: 0; line-height: var(--lh-snug); }
.awx h1 { font-size: var(--fs-44); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.awx h2 { font-size: var(--fs-32); }
.awx h3 { font-size: var(--fs-24); }
.awx p  { margin: 0 0 var(--space-4); line-height: var(--lh-relaxed); text-wrap: pretty; }
.awx .eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.awx .mono { font-family: var(--font-mono); }
.awx .italic-display { font-style: italic; font-family: var(--font-serif); }
.awx .tnum { font-variant-numeric: tabular-nums; }
.awx .brand-claim { font-family: var(--font-serif); font-style: italic; color: var(--fg-muted); line-height: 1.4; letter-spacing: 0.005em; }
.awx ::selection { background: var(--bergsonne); color: var(--felsgestein); }
@media (prefers-reduced-motion: reduce) {
  .awx *, .awx *::before, .awx *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==================== DAWN-NEUTRALISIERUNG (gescopet) ==================== */
/* aw_dawn_bridge.css — neutralisiert Dawn-base.css-Defaults im Redesign-Scope.
   WICHTIG: wird in theme.liquid DIREKT NACH base.css geladen (VOR aw_tokens/aw_kit/aw_sections),
   damit jede Design-Regel diese Neutralisierung normal ueberschreiben kann (P7-MCP-Fund #2).
   Dawn base.css:403-421: h1-h5/.h* bekommen rgb(var(--color-foreground)) (helles Scheme #121212 =
   unsichtbar auf dark), letter-spacing calc(*0.06rem) und word-break:break-word.
   ACHTUNG Spezifitaet: KEIN :is() mit Klassen-Argumenten — sonst (0,2,1) und die Bridge
   schlaegt jede Design-Regel wie .lp-hero h1 (0,1,1). Elemente und .h*-Klassen getrennt. */
.awx.b { letter-spacing: normal; }
.awx.b h1, .awx.b h2, .awx.b h3, .awx.b h4, .awx.b h5, .awx.b h6 {
  color: var(--fg, #FFFBF7);
  letter-spacing: normal;
  word-break: normal;
}
.awx.b .h0, .awx.b .h1, .awx.b .h2, .awx.b .h3, .awx.b .h4, .awx.b .h5 {
  color: var(--fg, #FFFBF7);
}

/* v1.1 P28-Kontrast (09.07.2026): helle Dawn-Produktkarten (Collection-Grid) NICHT aufhellen —
   die Regeln oben machten Karten-Titel weiß-auf-hellgrau (Kontrast ~1:1, unlesbar).
   v1.2 (28.07.2026, gemessen): `--felsgestein` ist KEINE feste Farbe — bei
   data-theme="light" tauscht aw_tokens.css sie auf Alpenlicht (#FFFBF7). Genau der
   Fix von oben kippte damit ins Gegenteil: PREISE weiss auf hellgrauer Karte,
   Kontrast 1.08, 26 Vorkommen auf /collections/all + /pages/track0725 — Kunden sehen
   den Preis nicht. Dawn-Karten sind IMMER hell, also die nicht tauschbare CI-Variable
   nehmen. Merke: --felsgestein/--alpenlicht sind themenabhaengig, --aw-ci-* nicht. */
  color: var(--aw-ci-felsgestein, #1E1E1C);
}

/* v6.117 (Stephan 29.07.: „eingabefeld in eingabefeld. schaut aus wie DOS") —
   Dawns base.css `:focus-visible` legt einen WEISSEN 3-px-Ring per box-shadow um jedes
   fokussierte Element (`0 0 0 .3rem rgb(var(--color-background))` + Glow). Auf unserer
   dunklen Suchseite ist das ein weisser Kasten um das transparente Eingabefeld — es
   sieht aus wie ein zweites, natives Feld. Unsere Komponenten-Regeln setzten nur
   `outline: none`, box-shadow blieb also stehen (gemessen: rgb(255,255,255) 0 0 0 3px).
   Hier zentral ersetzt durch einen Ring, der der Farbwelt folgt und in BEIDEN sichtbar
   ist. Element-Selektoren (0,1,1) — kein :is(), siehe Kopf dieser Datei. */
.awx.b input:focus-visible, .awx.b textarea:focus-visible, .awx.b select:focus-visible, .awx.b button:focus-visible, .awx.b a:focus-visible, .awx.b summary:focus-visible, .awx.b [tabindex]:focus-visible {
  outline: 2px solid var(--fg, #FFFBF7);
  outline-offset: 2px;
  box-shadow: none;
}
/* AUSNAHME — Felder, die IN einer gestylten Huelle sitzen: dort zeigt die Huelle den
   Fokus (:focus-within faerbt ihren Rand gold). Ein zweiter Ring direkt am Input malt
   genau den Kasten-im-Kasten, den wir gerade beseitigt haben. Spezifitaet muss ueber
   der Regel darueber liegen (0,2,2), sonst gewinnt die allgemeine — genau der Fehler,
   an dem die erste Fassung dieses Fixes gescheitert ist (nachgemessen: der Ring war
   dann meiner statt Dawns, optisch identisch). */
  outline: none;
  box-shadow: none;
}
/* Chrome rendert bei input[type=search] ein eigenes blaues Loeschkreuz (appearance:auto).
   Ausblenden waere Funktionsverlust — also in unsere Optik holen (Maske + currentColor). */
.awx.b input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-left: 8px; cursor: pointer;
  background-color: currentColor; opacity: .5;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 3l10 10M13 3L3 13" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 3l10 10M13 3L3 13" stroke="black" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center / contain no-repeat;
}
.awx.b input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
/* ==================== KIT (gescopet) ==================== */
/* ---------- layout ---------- */
.awx .wrap { width: 100%; max-width: var(--content-max, 1280px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }
/* v18.07g (Stephan: "Spalten der Sections gleich breit"): EINE Content-Kante ueberall —
   wide faellt auf die Standardbreite zurueck, Sektionen fluchten. */
.awx .wrap--wide { max-width: var(--content-max, 1280px); }
.awx .wrap--narrow { max-width: var(--content-narrow, 720px); }
.awx .stack > * + * { margin-top: var(--space-4); }
.awx .section { padding-block: clamp(56px, 9vw, 120px); }
.awx .section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- buttons ---------- */
.awx .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-15);
  line-height: 1; padding: 15px 24px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.awx .btn:active { opacity: .85; }
.awx .btn--primary { background: var(--fg); color: var(--bg); }
.awx .btn--primary:hover { opacity: .88; }
.awx .btn--cta { background: var(--bergsonne); color: var(--aw-on-accent); border-color: color-mix(in oklch, var(--bergsonne) 80%, var(--felsgestein)); font-weight: 600; }
.awx .btn--cta:hover { background: color-mix(in oklch, var(--bergsonne) 92%, white); }
.awx .btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.awx .btn--ghost:hover { background: color-mix(in oklch, var(--fg) 6%, transparent); }
.awx .btn--lg { padding: 18px 30px; font-size: var(--fs-16); }
.awx .btn--block { width: 100%; }
.awx .btn:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }

.awx a.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-15); color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 3px; transition: gap var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.awx a.link-arrow:hover { gap: 13px; border-color: var(--fg); }

/* ---------- pills / chips / badges ---------- */
.awx .pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-13); font-weight: 500; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--fg-muted); background: color-mix(in oklch, var(--fg) 4%, transparent); }
.awx .pill svg { width: 14px; height: 14px; }
.awx .pill--gold { background: var(--bergsonne); border-color: color-mix(in oklch, var(--bergsonne) 78%, var(--felsgestein)); color: var(--aw-on-accent); }
.awx .pill strong { font-weight: 600; }
.awx [data-theme="dark"] .pill { background: var(--border-mid); border-color: var(--border-mid-strong); color: var(--fg-muted); }
.awx [data-theme="dark"] .pill--gold { background: var(--bergsonne); color: var(--aw-on-accent); border-color: var(--bergsonne); }

.awx .trust-strip { display: flex; flex-wrap: wrap; gap: 10px; }

.awx .eyebrow-row { display: flex; align-items: center; gap: 12px; }
.awx .eyebrow-row::before { content: ""; width: 28px; height: 1px; background: var(--border-strong); display: block; }

/* ---------- hairline / dividers ---------- */
.awx .hairline { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* ---------- rating ---------- */
.awx .rating { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-14); color: var(--fg-muted); }
.awx .rating__stars { display: inline-flex; gap: 2px; color: var(--aw-star); } /* v19.07: Sterne IMMER Amazon-Gold (nicht mit accent-text flippen) */
.awx .rating__stars svg { width: 16px; height: 16px; }

/* =====================================================================
   KONFIGURATOR — WYSIWYG stage (shared across all directions)
   ===================================================================== */
.awx .aw-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3.4; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--bg-muted);
  cursor: grab; user-select: none; touch-action: pan-y;
  isolation: isolate;
}
.awx .aw-stage.is-grabbing { cursor: grabbing; }
.awx .aw-stage [data-aw-frame] {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.awx .aw-stage.wood-zirbe [data-aw-frame] { filter: sepia(.16) saturate(1.05) brightness(1.04) hue-rotate(-6deg); }
.awx .aw-stage.season-winter [data-aw-frame] { filter: saturate(.55) brightness(1.08) contrast(.96); }
.awx .aw-stage.wood-zirbe.season-winter [data-aw-frame] { filter: sepia(.1) saturate(.6) brightness(1.1); }
/* Wall mat — sockel larger than relief, framed-picture optic */
.awx .aw-stage__mat { position: absolute; inset: 7%; border: 14px solid color-mix(in oklch, var(--alpenholz) 60%, var(--alpenlicht)); border-radius: 3px; box-shadow: 0 10px 30px rgba(30,30,28,.28), inset 0 0 0 1px rgba(30,30,28,.18); pointer-events: none; mix-blend-mode: multiply; }
.awx .aw-stage.wood-zirbe .aw-stage__mat { border-color: color-mix(in oklch, var(--alpenholz) 38%, var(--alpenlicht)); }
/* Engraving plate */
.awx .aw-stage__plate {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: clamp(11px, 1.6vw, 14px); letter-spacing: .04em;
  color: color-mix(in oklch, var(--alpenholz) 70%, var(--felsgestein));
  padding: 4px 14px; white-space: pre-line; text-align: center; max-width: 70%;
  text-shadow: 0 1px 0 rgba(255,251,247,.35); pointer-events: none; font-weight: 500;
}
.awx .aw-stage__hint { position: absolute; right: 12px; bottom: 12px; pointer-events: none; }
.awx .aw-stage__hint span { font-family: var(--font-sans); font-size: var(--fs-12); letter-spacing: .04em; color: var(--alpenlicht); background: rgba(30,30,28,.55); padding: 6px 11px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); transition: opacity var(--dur-slow); }
.awx .aw-stage__badge { position: absolute; left: 14px; top: 14px; z-index: 2; }

/* Option groups (skinnable) */
.awx .opt-group { display: flex; flex-direction: column; gap: 10px; }
.awx .opt-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.awx .opt-label .eyebrow { color: var(--fg-subtle); }
.awx .opt-label__val { font-size: var(--fs-14); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.awx .opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.awx .opt {
  flex: 0 1 auto; min-height: 46px; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--fg); font: inherit; font-size: var(--fs-14); font-weight: 500;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.awx .opt small { font-size: var(--fs-12); color: var(--fg-faint); font-weight: 400; }
.awx .opt:hover { border-color: var(--fg); }
.awx .opt[aria-pressed="true"] { border-color: var(--felsgestein); box-shadow: inset 0 0 0 2px var(--bergsonne), 0 0 0 1px var(--felsgestein); background: var(--bergsonne-20); }
.awx [data-theme="dark"] .opt[aria-pressed="true"] { background: color-mix(in oklch, var(--bergsonne) 18%, var(--felsgestein)); box-shadow: inset 0 0 0 2px var(--bergsonne); border-color: var(--bergsonne); }
.awx .opt--grow { flex: 1 1 0; align-items: center; }
.awx .opt:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 2px; }

/* search */
.awx .aw-search { position: relative; }
.awx .aw-search input { width: 100%; padding: 13px 15px 13px 42px; font: inherit; font-size: var(--fs-15); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--fg); }
.awx .aw-search input:focus-visible { outline: 2px solid var(--bergsonne); outline-offset: 1px; border-color: var(--fg); }
.awx .aw-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fg-faint); pointer-events: none; }
.awx .aw-suggest { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.awx .aw-suggest li { padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-15); }
.awx .aw-suggest li:hover { background: var(--bg-subtle); }

/* engraving textarea */
.awx .aw-engrave-wrap textarea { width: 100%; min-height: 72px; 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); resize: vertical; }
.awx .aw-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.awx .aw-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.awx .aw-toggle__track { width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--bg-muted); border: 1px solid var(--border-strong); position: relative; transition: background var(--dur-base); flex: none; }
.awx .aw-toggle__track::after { content:""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.awx .aw-toggle input:checked + .aw-toggle__track { background: var(--bergsonne); border-color: var(--bergsonne-dark); }
.awx .aw-toggle input:checked + .aw-toggle__track::after { transform: translateX(18px); }
.awx .aw-toggle input:focus-visible + .aw-toggle__track { outline: 2px solid var(--bergsonne); outline-offset: 2px; }

/* live price block */
.awx .price-live { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); }
.awx .price-live__amt { font-size: var(--fs-44); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.awx .price-live__note { font-family: var(--font-sans); font-size: var(--fs-13); color: var(--fg-subtle); }

/* size scale visual */
.awx .size-scale { display: flex; align-items: flex-end; gap: 10px; }
.awx .size-scale__box { border: 1px dashed var(--border-strong); border-radius: 3px; display: grid; place-items: center; font-size: var(--fs-11); color: var(--fg-faint); position: relative; }
.awx .size-scale__human { width: 14px; align-self: flex-end; }

/* ---------- topo signature layer ---------- */
.awx .aw-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.awx .aw-topo svg { width: 100%; height: 100%; display: block; }
.awx .aw-topo path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }

/* Sticky-Kauf-Leiste: konsolidiert auf .lp-sticky (sections.css) — EINE Komponente, ein Breakpoint. */

/* utility */
.awx .muted { color: var(--fg-muted); }
.awx .subtle { color: var(--fg-subtle); }
.awx .center { text-align: center; }
.awx .measure { max-width: 60ch; }
.awx .measure-sm { max-width: 46ch; }
.awx [hidden] { display: none !important; }