/* =========================================================
CARDS v2 — Size-Klassen sind Renderer (xxs–xxl)

/* =========================================================
CARDS v2 — SYSTEM ERKLÄRUNG

GRUNDPRINZIP
Das Card-System trennt bewusst:

1) Layout (Box)        → card-*
2) Surface (Farbe)     → sf-*
3) Tiefe / Kontur      → card-elev / card-ol / card-brand-*
4) Verhalten (UX)      → card-interactive
5) Komfort-Presets     → preset-card*

WICHTIG:
card-* Klassen setzen KEINEN Hintergrund automatisch.
Die Fläche wird immer explizit über sf-* bestimmt.
Das verhindert implizite Logik und hält das System sauber kombinierbar.


-----------------------------------------------------------
1) RENDERER (Layout-Box)
-----------------------------------------------------------

card-xxs | card-xs | card-s | card-m | card-l | card-xl | card-xxl

→ Setzen:
   - Padding  (über --gap-*)
   - Radius   (über --radius-*)
→ Setzen NICHT:
   - Hintergrund
   - Shadow
   - Border
   - Flow (kein automatischer Stack)

Flow wird bewusst getrennt behandelt.


-----------------------------------------------------------
2) SURFACE (Hintergrund)
-----------------------------------------------------------

Kommt NICHT aus diesem Snippet, sondern aus Snippet 05:

sf-card     → Standard-Card-Fläche
sf-subtle   → ruhige, abgesetzte Fläche
sf-elev     → stärker abgesetzt
sf-strong   → kräftige Fläche
sf-page     → Seitenfläche

Beispiel:
<div class="card-m sf-card">


-----------------------------------------------------------
3) VARIANTEN (kombinierbar)
-----------------------------------------------------------

card-soft        → nutzt sf-subtle als Card-Hintergrund
card-ol          → neutraler Border statt Shadow
card-brand-1/2   → Brand-Outline
card-plain       → komplett neutral (kein Shadow/Border)

card-elev-s
card-elev
card-elev-l      → Shadow-Stufen

card-interactive → Lift + Transition

Beispiel:
<div class="card-m sf-card card-elev card-interactive">


-----------------------------------------------------------
4) FLOW (Content-Rhythmus)
-----------------------------------------------------------

preset-card* setzen automatisch:
   - Flow (über --stack-*)

Alternativ:
Flow kann manuell über stack-* Klassen ergänzt werden.

Beispiel:
<div class="card-m sf-card stack-s">


-----------------------------------------------------------
5) PRESETS (One-Class Komfort)
-----------------------------------------------------------

preset-card
preset-card-compact
preset-card-feature
preset-card-outline
preset-card-soft
preset-card-plain

→ Setzen automatisch:
   - Padding (Gap)
   - Radius
   - Flow (Stack)
   - Surface
   - Shadow/Border

Gedacht für schnelles Arbeiten in Elementor.


-----------------------------------------------------------
DESIGN-LOGIK (Merksatz)

Section-Ebene   → sf-subtle / sf-strong
Card-Ebene      → card-* + sf-card
Highlight       → sf-elev + card-elev
Komfortlösung   → preset-card*

Layout, Surface und Elevation bleiben bewusst getrennt.
Gap = Box-Innenabstand.
Stack = vertikaler Content-Rhythmus.
========================================================= */


/* =========================================================
   0) TOKEN MAPPING
   Erwartete Tokens:
   - Gap:     --gap-xxs ... --gap-xxl
   - Stack:   --stack-xxs ... --stack-xxl
   - Radius:  --radius-s/m/l/xl/xxl
   - Shadow:  --shadow-s/m/l + --shadow-alpha-s/m/l
   - Surfaces: --c-surface-card, --c-surface-subtle, --c-surface-elevated, --c-surface-strong
   - Border:  --c-border
   - Brand:   --shadow-color-1/2
========================================================= */

/* =========================================================
CARDS v2 — Elementor scoped
Regeln:
- card-xxs..xxl = Renderer (Box) OHNE Auto-Flow
- preset-card*  = One-class Presets MIT Auto-Flow
- Padding (Layout)  -> --gap-*
- Flow (Content)    -> --stack-*
- Surfaces (Farbe)  -> semantisch: --c-surface-card/subtle/...
========================================================= */

:root{
  --card-bg: transparent;
  --card-border: 0;
  --card-shadow: var(--card-shadow-m);

  /* Default-Flow nur für Presets */
  --card-flow: var(--stack-s);

  --card-shadow-s: var(--shadow-s) rgba(0,0,0,var(--shadow-alpha-s));
  --card-shadow-m: var(--shadow-m) rgba(0,0,0,var(--shadow-alpha-m));
  --card-shadow-l: var(--shadow-l) rgba(0,0,0,var(--shadow-alpha-l));
}


/* =========================================================
   1) RENDERER (card-* und presets)
   - Rendert immer die Box
========================================================= */

.elementor .card-xxs,
.elementor .card-xs,
.elementor .card-s,
.elementor .card-m,
.elementor .card-l,
.elementor .card-xl,
.elementor .card-xxl,
.elementor .preset-card,
.elementor .preset-card-compact,
.elementor .preset-card-feature,
.elementor .preset-card-outline,
.elementor .preset-card-soft,
.elementor .preset-card-plain{
  background: var(--card-bg);
  padding: var(--card-pad);
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}


/* =========================================================
   2) AUTO-FLOW NUR FÜR PRESETS (One-class Komfort)
========================================================= */

.elementor .preset-card > :where(* + *),
.elementor .preset-card-compact > :where(* + *),
.elementor .preset-card-feature > :where(* + *),
.elementor .preset-card-outline > :where(* + *),
.elementor .preset-card-soft > :where(* + *),
.elementor .preset-card-plain > :where(* + *){
  margin-top: var(--card-flow);
}


/* =========================================================
   3) SIZE SCALE (xxs → xxl)
   - Padding = GAP (Layout)
   - Radius  = Radius-Tokens
   - KEIN Flow hier (Flow kommt über stack-* oder Presets)
========================================================= */

.elementor .card-xxs{ --card-pad: var(--gap-xxs); --card-radius: var(--radius-s); }
.elementor .card-xs { --card-pad: var(--gap-xs);  --card-radius: var(--radius-m); }
.elementor .card-s  { --card-pad: var(--gap-s);   --card-radius: var(--radius-m); }
.elementor .card-m  { --card-pad: var(--gap-m);   --card-radius: var(--radius-l); } /* Default */
.elementor .card-l  { --card-pad: var(--gap-l);   --card-radius: var(--radius-xl); }
.elementor .card-xl { --card-pad: var(--gap-xl);  --card-radius: var(--radius-xxl); }
.elementor .card-xxl{ --card-pad: var(--gap-xxl); --card-radius: var(--radius-xxl); }


/* =========================================================
   4) VARIANTEN (setzen NUR Variablen) — kombinierbar
========================================================= */

/* Soft Surface */
.elementor .card-soft{
  --card-bg: var(--c-surface-subtle, var(--c-surface-2, #f6f7f9));
}

/* Outline statt Shadow */
.elementor .card-ol{
  --card-shadow: none;
  --card-border: 1px solid var(--c-border, rgba(0,0,0,0.10));
}

/* Brand Outline 1/2 */
.elementor .card-brand-1{
  --card-shadow: none;
  --card-border: 1px solid color-mix(in srgb, var(--shadow-color-1) 22%, transparent);
}
.elementor .card-brand-2{
  --card-shadow: none;
  --card-border: 1px solid color-mix(in srgb, var(--shadow-color-2) 22%, transparent);
}

/* Plain / Ghost */
.elementor .card-plain{
  --card-bg: transparent;
  --card-shadow: none;
  --card-border: 0;
}

/* Elevation (optional) */
.elementor .card-elev-s{ --card-shadow: var(--card-shadow-s); }
.elementor .card-elev  { --card-shadow: var(--card-shadow-m); }
.elementor .card-elev-l{ --card-shadow: var(--card-shadow-l); }

/* Interactive (dezent) */
.elementor .card-interactive{
  transition: transform var(--hover-speed) var(--hover-ease),
              box-shadow var(--hover-speed) var(--hover-ease),
              border-color var(--hover-speed) var(--hover-ease);
  will-change: transform;
}
.elementor .card-interactive:hover{
  transform: var(--lift-s);
  box-shadow: var(--card-shadow, var(--card-shadow-m));
}
.elementor .card-interactive:focus-within{
  outline: 2px solid color-mix(in srgb, var(--shadow-color-1) 28%, transparent);
  outline-offset: 2px;
}


/* =========================================================
   5) ONE-CLASS PRESETS (Elementor-friendly)
   - Presets definieren Pad/Radius/Flow/Surface/Shadow fertig
========================================================= */

.elementor .preset-card{
  --card-pad: var(--gap-m);
  --card-radius: var(--radius-l);
  --card-flow: var(--stack-s);
  --card-bg: var(--c-surface-card, var(--c-surface-1, #fff));
  --card-shadow: var(--card-shadow-m);
  --card-border: 0;
}

.elementor .preset-card-compact{
  --card-pad: var(--gap-s);
  --card-radius: var(--radius-m);
  --card-flow: var(--stack-xs);
  --card-bg: var(--c-surface-card, var(--c-surface-1, #fff));
  --card-shadow: var(--card-shadow-s);
  --card-border: 0;
}

.elementor .preset-card-feature{
  --card-pad: var(--gap-xl);
  --card-radius: var(--radius-xxl);
  --card-flow: var(--stack-m);
  --card-bg: var(--c-surface-card, var(--c-surface-1, #fff));
  --card-shadow: var(--card-shadow-l);
  --card-border: 0;
}

.elementor .preset-card-outline{
  --card-pad: var(--gap-m);
  --card-radius: var(--radius-l);
  --card-flow: var(--stack-s);
  --card-bg: var(--c-surface-card, var(--c-surface-1, #fff));
  --card-shadow: none;
  --card-border: 1px solid var(--c-border, rgba(0,0,0,0.10));
}

.elementor .preset-card-soft{
  --card-pad: var(--gap-m);
  --card-radius: var(--radius-l);
  --card-flow: var(--stack-s);
  --card-bg: var(--c-surface-subtle, var(--c-surface-2, #f6f7f9));
  --card-shadow: none;
  --card-border: 1px solid color-mix(in srgb, var(--c-border, rgba(0,0,0,0.10)) 60%, transparent);
}

.elementor .preset-card-plain{
  --card-pad: var(--gap-m);
  --card-radius: 0;
  --card-flow: var(--stack-s);
  --card-bg: transparent;
  --card-shadow: none;
  --card-border: 0;
}