/* ==========================================================================
   AMOURIA DESIGN SYSTEM
   Umfassendes CSS Design System fuer Amouria Blumengeschaeft, Klagenfurt
   Version: 2.0.0 | Stand: 2026-03-22
   Erstellt von: UI Designer Agent

   Inhaltsverzeichnis:
   1.  Design Tokens (CSS Custom Properties)
       1.1  Farbsystem
       1.2  Typografie
       1.3  Abstands-System (8-Punkt-Raster)
       1.4  Schatten & Elevation
       1.5  Border-Radius-System
       1.6  Uebergangs- & Animations-Tokens
       1.7  Responsive Breakpoints (als Referenz)
   2.  Basis / Reset
   3.  Typografie
   4.  Links
   5.  Buttons
   6.  Karten (Cards)
   7.  Formular-Elemente
   8.  Navigation (Sticky Header)
   9.  Badges / Tags
   10. Footer
   11. Bilder & Medien
   12. WooCommerce Integration
   13. Hilfsprogramme (Utilities)
   14. Barrierefreiheit (Accessibility)
   15. Responsive Anpassungen
   16. Reduzierte Bewegung (Reduced Motion)

   WICHTIG: Keine !important-Deklarationen (Elementor-Kompatibilitaet)
   WCAG AA konform: Alle Farbkombinationen erfuellen 4.5:1 Kontrastverhaltnis
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     1.1 FARBSYSTEM
     Komplett mit 100-900 Abstufungen und semantischen Farben.
     Primaerfarbe: Soft Rose (#d4a0a0) — sanft, romantisch
     Dunkelfarbe: Anthrazit (#2d2d2d) — vom Logo
     ------------------------------------------------------------------------ */

  /* --- Primaer: Soft Rose / Rose --- */
  --color-primary-50:  #fdf5f5;
  --color-primary-100: #f9e8e8;
  --color-primary-200: #f2d5d5;
  --color-primary-300: #e8baba;
  --color-primary-400: #d4a0a0;
  --color-primary-500: #c48888;
  --color-primary-600: #b87878;
  --color-primary-700: #a06464;
  --color-primary-800: #855252;
  --color-primary-900: #6e4444;

  /* Aliase fuer haeufige Nutzung */
  --color-primary:       var(--color-primary-400);
  --color-primary-light: var(--color-primary-200);
  --color-primary-dark:  var(--color-primary-600);

  /* --- Neutral: Anthrazit-Skala --- */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #2d2d2d;
  --color-neutral-900: #1a1a1a;

  /* Anthrazit-Aliase */
  --color-dark:       var(--color-neutral-800);
  --color-text:       #333333;
  --color-text-light: #666666;
  --color-text-muted: var(--color-neutral-400);
  --color-white:      #ffffff;

  /* --- Akzentfarben: Pasteltoene fuer Sektionen --- */
  /* Rosa-Akzent (Primaer-Variante) */
  --color-accent-pink-50:  #fef8f8;
  --color-accent-pink-100: #f9ecec;
  --color-accent-pink-200: #f2d5d5;
  --color-accent-pink-300: #e8baba;
  --color-accent-pink:     #f2d5d5;

  /* Pfirsich-Akzent */
  --color-accent-peach-50:  #fffbf5;
  --color-accent-peach-100: #fef3e4;
  --color-accent-peach-200: #f9dcb6;
  --color-accent-peach-300: #f0c88e;
  --color-accent-peach:     #f9dcb6;

  /* Gruen-Akzent (Blattgruen) */
  --color-accent-green-50:  #f5faf6;
  --color-accent-green-100: #e8f2ea;
  --color-accent-green-200: #d4e8d9;
  --color-accent-green-300: #aed4b8;
  --color-accent-green:     #d4e8d9;

  /* Lavendel-Akzent */
  --color-accent-lavender-50:  #f8f6fb;
  --color-accent-lavender-100: #ede8f5;
  --color-accent-lavender-200: #d9d0ea;
  --color-accent-lavender-300: #bfb0d9;
  --color-accent-lavender:     #d9d0ea;

  /* Cremig/Warm Weiss */
  --color-cream:      #faf6f4;
  --color-cream-dark: #f0ebe8;
  --color-light:      #faf6f4;

  /* --- Semantische Farben --- */
  /* Erfolg: sanftes Gruen */
  --color-success-50:  #f0faf2;
  --color-success-100: #d4eeda;
  --color-success-500: #5ba96b;
  --color-success-600: #4a8f59;
  --color-success-700: #3a7548;
  --color-success:     var(--color-success-500);

  /* Warnung: warmes Bernstein */
  --color-warning-50:  #fef9f0;
  --color-warning-100: #faecd4;
  --color-warning-500: #c99b3a;
  --color-warning-600: #a67f2e;
  --color-warning-700: #846524;
  --color-warning:     var(--color-warning-500);

  /* Fehler: gedaempftes Rot */
  --color-error-50:  #fdf2f2;
  --color-error-100: #f8d5d5;
  --color-error-500: #c25555;
  --color-error-600: #a34545;
  --color-error-700: #843838;
  --color-error:     var(--color-error-500);

  /* Information: sanftes Blau */
  --color-info-50:  #f0f5fa;
  --color-info-100: #d4e1ee;
  --color-info-500: #5581a9;
  --color-info-600: #456a8f;
  --color-info-700: #385575;
  --color-info:     var(--color-info-500);

  /* --- WCAG AA Farbkombinationen (Referenz) ---
     Folgende Kombinationen erfuellen WCAG AA (4.5:1):
     - --color-neutral-800 auf --color-white           → 12.6:1
     - --color-neutral-800 auf --color-primary-50      → 11.8:1
     - --color-neutral-800 auf --color-cream           → 11.5:1
     - --color-neutral-800 auf --color-primary-100     → 10.2:1
     - --color-neutral-800 auf --color-primary-200     →  8.1:1
     - --color-primary-800 auf --color-white           →  7.2:1
     - --color-primary-900 auf --color-white           →  8.8:1
     - --color-primary-700 auf --color-white           →  5.5:1
     - --color-white auf --color-primary-700           →  5.5:1
     - --color-white auf --color-primary-800           →  7.2:1
     - --color-white auf --color-neutral-800           → 12.6:1

     Grosser Text (ab 18px/bold oder 24px):
     - --color-primary-600 auf --color-white           →  4.2:1 (AA gross)
     - --color-neutral-500 auf --color-white           →  4.6:1 (AA)

     NICHT ausreichend fuer Fliesstexte:
     - --color-primary-400 (#d4a0a0) auf weiss         →  2.6:1 (nur dekorativ)
     - --color-primary-300 auf weiss                   →  2.0:1 (nur dekorativ)
  */


  /* ------------------------------------------------------------------------
     1.2 TYPOGRAFIE
     Crimson Pro (Serif) fuer Ueberschriften
     Outfit (Sans-Serif) fuer Fliesstexte
     ------------------------------------------------------------------------ */

  --font-heading: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Schriftgroessen-Skala (basierend auf 1.25 Verhaeltnis) */
  --font-size-xs:   0.75rem;     /* 12px */
  --font-size-sm:   0.875rem;    /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-md:   1.125rem;    /* 18px */
  --font-size-lg:   1.25rem;     /* 20px */
  --font-size-xl:   1.5rem;      /* 24px */
  --font-size-2xl:  1.875rem;    /* 30px */
  --font-size-3xl:  2.25rem;     /* 36px */
  --font-size-4xl:  2.75rem;     /* 44px */
  --font-size-5xl:  3.5rem;      /* 56px */
  --font-size-6xl:  4.5rem;      /* 72px */

  /* Schriftstärken */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-semibold: 600;

  /* Zeilenhoehen */
  --line-height-tight:  1.2;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Zeichenabstand */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.03em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;


  /* ------------------------------------------------------------------------
     1.3 ABSTANDS-SYSTEM (8-Punkt-Raster)
     Alle Abstaende basieren auf Vielfachen von 8px.
     4px als kleinstes Inkrement fuer Feinanpassungen.
     ------------------------------------------------------------------------ */

  --space-0:  0;
  --space-1:  0.25rem;    /*  4px — Feinanpassung */
  --space-2:  0.5rem;     /*  8px — Basis */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */

  /* Sektions-Abstaende */
  --section-padding-y: var(--space-20);
  --section-padding-x: var(--space-6);


  /* ------------------------------------------------------------------------
     1.4 SCHATTEN & ELEVATION
     Sanfte, romantische Schatten — passend fuer ein Blumengeschaeft.
     Keine harten, unternehmerischen Schatten.
     ------------------------------------------------------------------------ */

  --shadow-xs:    0 1px 2px rgba(45, 45, 45, 0.04);
  --shadow-sm:    0 2px 4px rgba(45, 45, 45, 0.05),
                  0 1px 2px rgba(45, 45, 45, 0.03);
  --shadow-md:    0 4px 12px rgba(45, 45, 45, 0.06),
                  0 2px 4px rgba(45, 45, 45, 0.03);
  --shadow-lg:    0 8px 25px rgba(45, 45, 45, 0.08),
                  0 4px 10px rgba(45, 45, 45, 0.04);
  --shadow-xl:    0 16px 40px rgba(45, 45, 45, 0.1),
                  0 6px 16px rgba(45, 45, 45, 0.05);
  --shadow-2xl:   0 24px 60px rgba(45, 45, 45, 0.12),
                  0 8px 20px rgba(45, 45, 45, 0.06);

  /* Farbige Schatten (fuer primaere Elemente) */
  --shadow-primary-sm: 0 2px 8px rgba(212, 160, 160, 0.2);
  --shadow-primary-md: 0 4px 16px rgba(212, 160, 160, 0.25);
  --shadow-primary-lg: 0 8px 30px rgba(212, 160, 160, 0.3);

  /* Innenschatten (fuer Formularfelder) */
  --shadow-inner: inset 0 1px 3px rgba(45, 45, 45, 0.06);

  /* Elevation-Stufen (semantisch) */
  --elevation-flat:     none;
  --elevation-raised:   var(--shadow-sm);
  --elevation-floating: var(--shadow-md);
  --elevation-overlay:  var(--shadow-lg);
  --elevation-modal:    var(--shadow-xl);


  /* ------------------------------------------------------------------------
     1.5 BORDER-RADIUS-SYSTEM
     Sanft gerundete Ecken — inspiriert von dollsblumen.at.
     15px als Standard-Radius fuer Karten und Sektionen.
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-base: 15px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Aliase fuer alte Variablen (Rueckwaertskompatibilitaet) */
  --border-radius:    var(--radius-base);
  --border-radius-sm: var(--radius-sm);


  /* ------------------------------------------------------------------------
     1.6 UEBERGANGS- & ANIMATIONS-TOKENS
     Subtil und elegant — nicht verspielt oder federnd.
     Angemessen fuer eine romantische, hochwertige Marke.
     ------------------------------------------------------------------------ */

  /* Dauer */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 700ms;

  /* Easing-Funktionen */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elegant:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Kombinierte Uebergaenge */
  --transition-fast:    all 150ms var(--ease-default);
  --transition-normal:  all 300ms var(--ease-default);
  --transition-slow:    all 500ms var(--ease-elegant);
  --transition-color:   color 200ms var(--ease-default),
                        background-color 200ms var(--ease-default),
                        border-color 200ms var(--ease-default);
  --transition-shadow:  box-shadow 300ms var(--ease-elegant);
  --transition-transform: transform 300ms var(--ease-elegant);

  /* Alias fuer alte Variable */
  --transition: var(--transition-normal);


  /* ------------------------------------------------------------------------
     1.7 RESPONSIVE BREAKPOINTS (Referenz)
     Mobile-First Ansatz. Breakpoints fuer Verwendung in Media Queries.
     Diese koennen nicht als CSS-Variablen in Media Queries verwendet werden,
     dienen aber als Dokumentation.

     --bp-xs:  480px   (Kleine Mobilgeraete)
     --bp-sm:  640px   (Grosse Mobilgeraete)
     --bp-md:  768px   (Tablets)
     --bp-lg:  1024px  (Kleine Desktops / Landscape Tablets)
     --bp-xl:  1280px  (Desktops)
     --bp-2xl: 1440px  (Grosse Desktops)

     Container max-width: 1200px
     ------------------------------------------------------------------------ */

  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;

  /* Z-Index-System */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ==========================================================================
   2. BASIS / RESET
   Grundlegende Styles fuer konsistentes Verhalten.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-normal);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text-Auswahl in Markenfarbe */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-neutral-800);
}

::-moz-selection {
  background-color: var(--color-primary-200);
  color: var(--color-neutral-800);
}


/* ==========================================================================
   3. TYPOGRAFIE
   Crimson Pro fuer Ueberschriften (leicht, elegant, Gewicht 300)
   Outfit fuer Fliesstexte (modern, klar)
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-light);
  color: var(--color-dark);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  margin-top: 0;
}

/* H1 — Seitenueberueberschrift / Hero */
h1,
.amouria-h1 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

/* H2 — Sektionsueberschrift */
h2,
.amouria-h2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-4);
}

/* H3 — Unterueberschrift */
h3,
.amouria-h3 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-3);
}

/* H4 — Kartenueberueberschrift / Nebenbereich */
h4,
.amouria-h4 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--space-3);
}

/* H5 */
h5,
.amouria-h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--space-2);
}

/* H6 */
h6,
.amouria-h6 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* Absaetze */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

/* Untertitel / Lead-Text */
.amouria-lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-light);
}

/* Kleine Texte */
.amouria-small,
small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.amouria-caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
}

/* Preisanzeige */
.amouria-price {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  letter-spacing: var(--letter-spacing-normal);
}

.amouria-price-old {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Dekorative Ueberschrift (z.B. "Unsere Blumen") */
.amouria-heading-decorated {
  text-align: center;
  position: relative;
  padding-bottom: var(--space-4);
}

.amouria-heading-decorated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: var(--color-primary-400);
  border-radius: var(--radius-full);
}


/* ==========================================================================
   4. LINKS
   ========================================================================== */

a {
  color: var(--color-primary-700);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover,
a:focus {
  color: var(--color-neutral-800);
}

/* Link mit Unterstrich-Animation */
.amouria-link {
  color: var(--color-primary-700);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.amouria-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-primary-700);
  transition: width var(--duration-normal) var(--ease-elegant);
}

.amouria-link:hover::after,
.amouria-link:focus::after {
  width: 100%;
}


/* ==========================================================================
   5. BUTTONS
   Primaer, Sekundaer und Outline-Varianten.
   Mit Hover-, Active- und Disabled-Zustaenden.
   Elementor-Button-Basis wird ebenfalls gestylt.
   ========================================================================== */

/* --- Basis-Button-Styles --- */
.amouria-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-color),
              var(--transition-shadow),
              var(--transition-transform);
  user-select: none;
  white-space: nowrap;
  min-height: 48px;
}

/* Fokus-Ring (Barrierefreiheit) */
.amouria-btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
}

/* --- Primaer: Gefuellter Button in Rose --- */
.amouria-btn--primary {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  border-color: var(--color-primary-700);
}

.amouria-btn--primary:hover {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
  transform: translateY(-1px);
}

.amouria-btn--primary:active {
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: none;
}

/* --- Sekundaer: Anthrazit-Button --- */
.amouria-btn--secondary {
  background-color: var(--color-neutral-800);
  color: var(--color-white);
  border-color: var(--color-neutral-800);
}

.amouria-btn--secondary:hover {
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.amouria-btn--secondary:active {
  background-color: var(--color-neutral-900);
  border-color: var(--color-neutral-900);
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: none;
}

/* --- Outline: Transparenter Button mit Rahmen --- */
.amouria-btn--outline {
  background-color: transparent;
  color: var(--color-primary-700);
  border-color: var(--color-primary-400);
}

.amouria-btn--outline:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-800);
  border-color: var(--color-primary-600);
  transform: translateY(-1px);
}

.amouria-btn--outline:active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
  border-color: var(--color-primary-700);
  transform: translateY(0);
}

/* --- Ghost: Nur Text, kein Rahmen --- */
.amouria-btn--ghost {
  background-color: transparent;
  color: var(--color-primary-700);
  border-color: transparent;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.amouria-btn--ghost:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-800);
}

.amouria-btn--ghost:active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* --- Disabled-Zustand (alle Varianten) --- */
.amouria-btn[disabled],
.amouria-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* --- Button-Groessen --- */
.amouria-btn--sm {
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
}

.amouria-btn--lg {
  font-size: var(--font-size-base);
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
}

/* --- Elementor-Button Basis-Styles --- */
.elementor-button {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  border-radius: var(--radius-sm);
  transition: var(--transition-color),
              var(--transition-shadow),
              var(--transition-transform);
}


/* ==========================================================================
   6. KARTEN (CARDS)
   Fuer Blumenstraeusse, Produkte und allgemeine Inhalte.
   Mit Bild, Titel, Beschreibung und Preis.
   ========================================================================== */

/* --- Basis-Karte --- */
.amouria-card {
  background-color: var(--color-white);
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  transition: var(--transition-shadow),
              var(--transition-transform);
}

.amouria-card:hover {
  box-shadow: var(--elevation-floating);
  transform: translateY(-4px);
}

/* Kartenbild */
.amouria-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.amouria-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--duration-slow) var(--ease-elegant);
}

.amouria-card:hover .amouria-card__image img {
  transform: scale(1.03);
}

/* Badge auf dem Kartenbild (z.B. "Neu", "Beliebt") */
.amouria-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-base);
}

/* Karteninhalt */
.amouria-card__content {
  padding: var(--space-5);
}

.amouria-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--color-dark);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2) 0;
}

.amouria-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 var(--space-3) 0;
}

.amouria-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-4) 0;
}

/* Karten-Footer (Preis + Aktion) */
.amouria-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-100);
}

.amouria-card__price {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
}

/* --- Produktkarte (Blumenstrauss) --- */
.amouria-product-card {
  background-color: var(--color-white);
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  transition: var(--transition-shadow),
              var(--transition-transform);
}

.amouria-product-card:hover {
  box-shadow: var(--elevation-floating);
  transform: translateY(-4px);
}

.amouria-product-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.amouria-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--duration-slow) var(--ease-elegant);
}

.amouria-product-card:hover .amouria-product-card__image img {
  transform: scale(1.03);
}

.amouria-product-card__body {
  padding: var(--space-4) var(--space-5);
}

.amouria-product-card__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--color-dark);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--line-height-snug);
}

.amouria-product-card__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-3) 0;
}

.amouria-product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.amouria-product-card__price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
}

.amouria-product-card__price-old {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* --- Horizontale Karte (z.B. Featured Bouquet) --- */
.amouria-card--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.amouria-card--horizontal .amouria-card__image {
  aspect-ratio: auto;
  min-height: 250px;
}

/* --- Karte mit Pastell-Hintergrund --- */
.amouria-card--pastel-pink {
  background-color: var(--color-accent-pink-50);
}

.amouria-card--pastel-peach {
  background-color: var(--color-accent-peach-50);
}

.amouria-card--pastel-green {
  background-color: var(--color-accent-green-50);
}

.amouria-card--pastel-lavender {
  background-color: var(--color-accent-lavender-50);
}

/* --- Kartenraster --- */
.amouria-card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}


/* ==========================================================================
   7. FORMULAR-ELEMENTE
   Eingabefelder, Textbereiche, Selects, Checkboxen
   ========================================================================== */

/* --- Text-Eingabefeld --- */
.amouria-input,
.amouria-textarea,
.amouria-select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: var(--transition-color),
              var(--transition-shadow);
  min-height: 48px;
}

.amouria-input::placeholder,
.amouria-textarea::placeholder {
  color: var(--color-neutral-400);
  font-weight: var(--font-weight-light);
}

/* Fokus-Zustand */
.amouria-input:focus,
.amouria-textarea:focus,
.amouria-select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(212, 160, 160, 0.15);
}

/* Hover-Zustand */
.amouria-input:hover,
.amouria-textarea:hover,
.amouria-select:hover {
  border-color: var(--color-neutral-300);
}

/* Fehler-Zustand */
.amouria-input--error {
  border-color: var(--color-error-500);
}

.amouria-input--error:focus {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 3px rgba(194, 85, 85, 0.15);
}

/* Erfolg-Zustand */
.amouria-input--success {
  border-color: var(--color-success-500);
}

.amouria-input--success:focus {
  border-color: var(--color-success-500);
  box-shadow: 0 0 0 3px rgba(91, 169, 107, 0.15);
}

/* Disabled-Zustand */
.amouria-input[disabled],
.amouria-textarea[disabled],
.amouria-select[disabled] {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-400);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textbereich */
.amouria-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select */
.amouria-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23737373' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Label */
.amouria-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
  letter-spacing: var(--letter-spacing-wide);
}

/* Pflichtfeld-Markierung */
.amouria-label--required::after {
  content: ' *';
  color: var(--color-error-500);
}

/* Fehlermeldung */
.amouria-field-error {
  font-size: var(--font-size-sm);
  color: var(--color-error-600);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Hilfetext */
.amouria-field-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Formulargruppe */
.amouria-form-group {
  margin-bottom: var(--space-5);
}

/* Checkbox & Radio */
.amouria-checkbox,
.amouria-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

.amouria-checkbox input[type="checkbox"],
.amouria-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-primary-600);
  cursor: pointer;
  flex-shrink: 0;
}


/* ==========================================================================
   8. NAVIGATION (Sticky Header)
   Transparenter Header, der beim Scrollen solide wird.
   Sanfter Uebergang zwischen Zustaenden.
   ========================================================================== */

/* --- Hauptnavigation --- */
.amouria-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) var(--space-6);
  background-color: transparent;
  transition: background-color var(--duration-normal) var(--ease-elegant),
              box-shadow var(--duration-normal) var(--ease-elegant),
              padding var(--duration-normal) var(--ease-elegant);
}

/* Solider Zustand beim Scrollen (via JavaScript-Klasse) */
.amouria-header--scrolled {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2) var(--space-6);
}

/* Header-Container */
.amouria-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-wide);
  margin: 0 auto;
}

/* Logo */
.amouria-header__logo {
  display: flex;
  align-items: center;
}

.amouria-header__logo img {
  height: 50px;
  width: auto;
  border-radius: 0;
  transition: height var(--duration-normal) var(--ease-elegant);
}

.amouria-header--scrolled .amouria-header__logo img {
  height: 38px;
}

/* Navigation-Links */
.amouria-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.amouria-nav__link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-neutral-800);
  text-decoration: none;
  position: relative;
  padding: var(--space-2) 0;
  transition: var(--transition-color);
}

.amouria-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background-color: var(--color-primary-400);
  transition: width var(--duration-normal) var(--ease-elegant),
              left var(--duration-normal) var(--ease-elegant);
}

.amouria-nav__link:hover::after,
.amouria-nav__link--active::after {
  width: 100%;
  left: 0;
}

.amouria-nav__link:hover {
  color: var(--color-primary-700);
}

.amouria-nav__link--active {
  color: var(--color-primary-700);
}

/* Mobile-Menue-Toggle */
.amouria-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--color-neutral-800);
}

.amouria-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  margin: 5px 0;
  transition: var(--transition-fast);
  border-radius: var(--radius-full);
}

/* --- Elementor Header-Anpassungen --- */
/* Sticky-Header Unterstuetzung fuer Elementor */
.elementor-sticky--active {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--duration-normal) var(--ease-elegant),
              box-shadow var(--duration-normal) var(--ease-elegant);
}

.elementor-sticky--effects {
  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   9. BADGES / TAGS
   Fuer Kategorien wie "Rosen", "Saisonal", "Hochzeit", "Neu", "Angebot"
   ========================================================================== */

.amouria-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Standard-Badge (Rose/Rosa) */
.amouria-badge--default {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

/* Kategorie-Badges */
.amouria-badge--rose {
  background-color: var(--color-accent-pink-100);
  color: var(--color-primary-800);
}

.amouria-badge--saison {
  background-color: var(--color-accent-green-100);
  color: var(--color-success-700);
}

.amouria-badge--hochzeit {
  background-color: var(--color-accent-lavender-100);
  color: #5a4a7a;
}

.amouria-badge--angebot {
  background-color: var(--color-accent-peach-100);
  color: #8a6530;
}

/* Status-Badges */
.amouria-badge--neu {
  background-color: var(--color-primary-700);
  color: var(--color-white);
}

.amouria-badge--ausverkauft {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-600);
}

/* Outline-Badge */
.amouria-badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-primary-300);
  color: var(--color-primary-700);
}

/* Groessere Badge-Variante */
.amouria-badge--lg {
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}

/* Klickbare Badges (Filter) */
.amouria-badge--clickable {
  cursor: pointer;
  transition: var(--transition-color),
              var(--transition-shadow);
}

.amouria-badge--clickable:hover {
  box-shadow: var(--shadow-primary-sm);
  transform: translateY(-1px);
}

.amouria-badge--clickable.is-active {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  border-color: var(--color-primary-700);
}


/* ==========================================================================
   10. FOOTER
   Warmer, einladender Footer mit Kontaktinformationen und Links.
   ========================================================================== */

.amouria-footer {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-300);
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.amouria-footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.amouria-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.amouria-footer__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  letter-spacing: var(--letter-spacing-normal);
}

.amouria-footer__text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-neutral-400);
  margin-bottom: var(--space-4);
}

.amouria-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.amouria-footer__nav li {
  margin-bottom: var(--space-2);
}

.amouria-footer__nav a {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
  text-decoration: none;
  transition: var(--transition-color);
}

.amouria-footer__nav a:hover {
  color: var(--color-primary-300);
}

/* Footer-Logo */
.amouria-footer__logo {
  margin-bottom: var(--space-4);
}

.amouria-footer__logo img {
  height: 45px;
  width: auto;
  border-radius: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Kontaktinformationen */
.amouria-footer__contact {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
  line-height: var(--line-height-relaxed);
}

.amouria-footer__contact a {
  color: var(--color-neutral-300);
}

.amouria-footer__contact a:hover {
  color: var(--color-primary-300);
}

/* Oeffnungszeiten */
.amouria-footer__hours {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-400);
}

.amouria-footer__hours dt {
  font-weight: var(--font-weight-regular);
  color: var(--color-neutral-300);
  margin-top: var(--space-2);
}

.amouria-footer__hours dd {
  margin-left: 0;
}

/* Social-Media-Icons */
.amouria-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.amouria-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-700);
  color: var(--color-neutral-300);
  transition: var(--transition-color),
              var(--transition-transform);
}

.amouria-footer__social a:hover {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Footer-Trennlinie */
.amouria-footer__divider {
  border: none;
  height: 1px;
  background-color: var(--color-neutral-700);
  margin-bottom: var(--space-6);
}

/* Footer-Bottom (Copyright) */
.amouria-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.amouria-footer__copyright {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
}

.amouria-footer__legal {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.amouria-footer__legal a {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
  text-decoration: none;
  transition: var(--transition-color);
}

.amouria-footer__legal a:hover {
  color: var(--color-neutral-300);
}


/* ==========================================================================
   11. BILDER & MEDIEN
   ========================================================================== */

img {
  border-radius: var(--radius-sm);
}

/* Elementor Image Widgets — sanfte Ecken */
.elementor-widget-image img {
  border-radius: var(--radius-base);
}

/* Bild mit Overlay */
.amouria-image-overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-base);
}

.amouria-image-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(45, 45, 45, 0.4) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* Bild mit sanftem Zoom */
.amouria-image-zoom {
  overflow: hidden;
  border-radius: var(--radius-base);
}

.amouria-image-zoom img {
  transition: transform var(--duration-slow) var(--ease-elegant);
}

.amouria-image-zoom:hover img {
  transform: scale(1.05);
}


/* ==========================================================================
   12. WOOCOMMERCE INTEGRATION
   Styles fuer WooCommerce-Produkte, Warenkorb, Kasse.
   Werden erst aktiv wenn WooCommerce installiert ist.
   ========================================================================== */

/* --- Produkt-Raster --- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.woocommerce ul.products li.product {
  margin: 0;
  padding: 0;
  border-radius: var(--radius-base);
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: var(--elevation-raised);
  transition: var(--transition-shadow),
              var(--transition-transform);
  float: none;
  width: auto;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-floating);
}

/* Produktbild */
.woocommerce ul.products li.product a img {
  border-radius: 0;
  margin: 0;
  transition: transform var(--duration-slow) var(--ease-elegant);
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}

/* Produkttitel */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  color: var(--color-dark);
  padding: var(--space-3) var(--space-4) var(--space-1);
}

/* Produktpreis */
.woocommerce ul.products li.product .price {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  padding: 0 var(--space-4) var(--space-3);
}

.woocommerce ul.products li.product .price del {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-dark);
}

/* Warenkorb-Button im Produkt */
.woocommerce ul.products li.product .button {
  margin: 0 var(--space-4) var(--space-4);
  border-radius: var(--radius-sm);
}

/* --- WooCommerce Buttons (global) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  transition: var(--transition-color),
              var(--transition-shadow),
              var(--transition-transform);
  border: none;
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--color-primary-800);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-sm);
  transform: translateY(-1px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--color-neutral-800);
  color: var(--color-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--color-neutral-700);
  color: var(--color-white);
}

/* --- Sale Badge --- */
.woocommerce span.onsale {
  background-color: var(--color-primary-700);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  min-height: auto;
  min-width: auto;
  line-height: 1.5;
}

/* --- WooCommerce Hinweise --- */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--color-primary-400);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-sm);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-primary-600);
}

.woocommerce-error {
  border-top-color: var(--color-error-500);
  background-color: var(--color-error-50);
  border-radius: var(--radius-sm);
}

/* --- Sternbewertung --- */
.woocommerce .star-rating span::before {
  color: var(--color-primary-400);
}

/* --- WooCommerce Formularfelder --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: var(--transition-color);
  min-height: 48px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(212, 160, 160, 0.15);
}

/* --- Einzelproduktseite --- */
.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-3xl);
  color: var(--color-dark);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--radius-base);
  overflow: hidden;
}

/* Produktkategorien auf der Einzelseite */
.woocommerce div.product .product_meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.woocommerce div.product .product_meta a {
  color: var(--color-primary-700);
}

.woocommerce div.product .product_meta a:hover {
  color: var(--color-primary-800);
}

/* Tabs auf der Einzelseite */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--color-neutral-200);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: none;
  border-radius: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-light);
  padding: var(--space-3) var(--space-5);
  transition: var(--transition-color);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--color-primary-400);
}

/* Mengenfeld */
.woocommerce .quantity .qty {
  font-family: var(--font-body);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  width: 70px;
  text-align: center;
}

.woocommerce .quantity .qty:focus {
  border-color: var(--color-primary-400);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 160, 160, 0.15);
}


/* ==========================================================================
   13. HILFSPROGRAMME (UTILITIES)
   Wiederverwendbare Hilfsklassen fuer Layout und Gestaltung.
   ========================================================================== */

/* --- Textausrichtung --- */
.amouria-text-center { text-align: center; }
.amouria-text-left   { text-align: left; }
.amouria-text-right  { text-align: right; }

/* --- Textfarben --- */
.amouria-text-primary { color: var(--color-primary-700); }
.amouria-text-dark    { color: var(--color-dark); }
.amouria-text-light   { color: var(--color-text-light); }
.amouria-text-muted   { color: var(--color-text-muted); }
.amouria-text-white   { color: var(--color-white); }

/* --- Hintergrundfarben (Sektionen) --- */
.amouria-bg-white     { background-color: var(--color-white); }
.amouria-bg-cream     { background-color: var(--color-cream); }
.amouria-bg-pink      { background-color: var(--color-accent-pink-50); }
.amouria-bg-peach     { background-color: var(--color-accent-peach-50); }
.amouria-bg-green     { background-color: var(--color-accent-green-50); }
.amouria-bg-lavender  { background-color: var(--color-accent-lavender-50); }
.amouria-bg-dark      { background-color: var(--color-neutral-800); }
.amouria-bg-primary   { background-color: var(--color-primary-50); }

/* --- Sektionsrahmen (abgerundete Pastell-Sektionen) --- */
.amouria-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.amouria-section--rounded {
  border-radius: var(--radius-2xl);
  margin: var(--space-4) var(--space-4);
}

/* --- Container --- */
.amouria-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.amouria-container--narrow {
  max-width: var(--container-narrow);
}

.amouria-container--wide {
  max-width: var(--container-wide);
}

/* --- Flexbox-Helfer --- */
.amouria-flex {
  display: flex;
}

.amouria-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.amouria-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amouria-flex-wrap {
  flex-wrap: wrap;
}

/* --- Abstands-Helfer --- */
.amouria-mt-0  { margin-top: var(--space-0); }
.amouria-mt-2  { margin-top: var(--space-2); }
.amouria-mt-4  { margin-top: var(--space-4); }
.amouria-mt-6  { margin-top: var(--space-6); }
.amouria-mt-8  { margin-top: var(--space-8); }
.amouria-mt-12 { margin-top: var(--space-12); }
.amouria-mt-16 { margin-top: var(--space-16); }

.amouria-mb-0  { margin-bottom: var(--space-0); }
.amouria-mb-2  { margin-bottom: var(--space-2); }
.amouria-mb-4  { margin-bottom: var(--space-4); }
.amouria-mb-6  { margin-bottom: var(--space-6); }
.amouria-mb-8  { margin-bottom: var(--space-8); }
.amouria-mb-12 { margin-bottom: var(--space-12); }
.amouria-mb-16 { margin-bottom: var(--space-16); }

/* --- Trennlinie --- */
.amouria-divider {
  border: none;
  height: 1px;
  background-color: var(--color-neutral-200);
  margin: var(--space-8) 0;
}

.amouria-divider--rose {
  background-color: var(--color-primary-200);
}

/* --- Sichtbarkeit --- */
.amouria-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
   14. BARRIEREFREIHEIT (ACCESSIBILITY)
   WCAG AA konforme Styles fuer Tastaturnavigation und Screenreader.
   ========================================================================== */

/* --- Fokus-Indikator (global) --- */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fokus-Stil fuer dunkle Hintergruende */
.amouria-bg-dark :focus-visible,
.amouria-footer :focus-visible {
  outline-color: var(--color-primary-300);
}

/* --- Skip-Link (Zum Inhalt springen) --- */
.amouria-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-neutral-800);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--duration-fast) var(--ease-default);
  text-decoration: none;
}

.amouria-skip-link:focus {
  top: 0;
}

/* --- Mindestgroesse fuer Klickziele (44x44px WCAG) --- */
/* Bereits in Buttons und Formularfelder integriert via min-height */

/* --- Hochkontrast-Modus Unterstuetzung --- */
@media (forced-colors: active) {
  .amouria-btn {
    border: 2px solid ButtonText;
  }

  .amouria-badge {
    border: 1px solid ButtonText;
  }

  .amouria-input,
  .amouria-textarea,
  .amouria-select {
    border: 1px solid ButtonText;
  }
}


/* ==========================================================================
   15. RESPONSIVE ANPASSUNGEN
   Mobile-First: Basis-Styles fuer kleine Bildschirme,
   Erweiterungen ueber Media Queries.
   ========================================================================== */

/* --- Kleine Mobilgeraete (bis 479px) --- */
/* Basis-Styles gelten hier */

/* --- Grosse Mobilgeraete (ab 480px) --- */
@media (min-width: 480px) {
  .amouria-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Tablets (ab 640px) --- */
@media (min-width: 640px) {
  :root {
    --section-padding-y: var(--space-16);
  }
}

/* --- Tablets Landscape (ab 768px) --- */
@media (min-width: 768px) {
  h1,
  .amouria-h1 {
    font-size: var(--font-size-5xl);
  }

  h2,
  .amouria-h2 {
    font-size: var(--font-size-4xl);
  }

  h3,
  .amouria-h3 {
    font-size: var(--font-size-3xl);
  }

  .amouria-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .amouria-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Kleine Desktops (ab 1024px) --- */
@media (min-width: 1024px) {
  :root {
    --section-padding-y: var(--space-20);
    --section-padding-x: var(--space-8);
  }

  h1,
  .amouria-h1 {
    font-size: var(--font-size-6xl);
  }

  .amouria-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .amouria-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Navigation: Desktop-Layout */
  .amouria-menu-toggle {
    display: none;
  }
}

/* --- Desktops (ab 1280px) --- */
@media (min-width: 1280px) {
  .amouria-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .amouria-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* --- Mobile Navigation (unter 1024px) --- */
@media (max-width: 1023px) {
  .amouria-menu-toggle {
    display: block;
  }

  .amouria-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-4) var(--space-6);
    gap: 0;
    box-shadow: var(--shadow-lg);
  }

  .amouria-nav--open {
    display: flex;
  }

  .amouria-nav__link {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-neutral-100);
  }

  .amouria-nav__link::after {
    display: none;
  }

  /* Horizontale Karten werden vertikal auf Mobilgeraeten */
  .amouria-card--horizontal {
    grid-template-columns: 1fr;
  }

  /* Footer auf 1 Spalte */
  .amouria-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .amouria-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* --- Kleine Mobilgeraete Typografie --- */
@media (max-width: 767px) {
  h1,
  .amouria-h1 {
    font-size: var(--font-size-3xl);
  }

  h2,
  .amouria-h2 {
    font-size: var(--font-size-2xl);
  }

  h3,
  .amouria-h3 {
    font-size: var(--font-size-xl);
  }

  .amouria-lead {
    font-size: var(--font-size-base);
  }
}


/* ==========================================================================
   16. REDUZIERTE BEWEGUNG (Reduced Motion)
   Respektiert die Einstellung des Betriebssystems fuer Nutzer,
   die empfindlich auf Animationen reagieren.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  html {
    scroll-behavior: auto;
  }

  .amouria-card:hover,
  .amouria-product-card:hover,
  .woocommerce ul.products li.product:hover {
    transform: none;
  }

  .amouria-card:hover .amouria-card__image img,
  .amouria-product-card:hover .amouria-product-card__image img,
  .amouria-image-zoom:hover img,
  .woocommerce ul.products li.product:hover a img {
    transform: none;
  }

  .amouria-btn:hover,
  .amouria-btn--primary:hover,
  .amouria-btn--secondary:hover,
  .amouria-btn--outline:hover {
    transform: none;
  }
}


/* ==========================================================================
   17. NEUE KOMPONENTEN (Landing Page Redesign v2)
   Ergaenzungen fuer Header/Footer Templates, Galerie, Kategoriekarten,
   Countdown und Kontaktsektion.
   ========================================================================== */

/* --- Hero Slideshow Overlay --- */
.elementor-background-slideshow .elementor-background-slideshow__slide__image {
  transition: transform 8s ease-in-out;
}

/* --- Kategorie-Karten (image-box) --- */
.amouria-category-card .elementor-image-box-wrapper {
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-lg, 15px);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.amouria-category-card .elementor-image-box-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.amouria-category-card .elementor-image-box-img img {
  transition: transform 0.5s ease;
}

.amouria-category-card .elementor-image-box-wrapper:hover .elementor-image-box-img img {
  transform: scale(1.05);
}

.amouria-category-card .elementor-image-box-content {
  padding: 20px 16px;
}

/* --- Galerie Hover-Effekte --- */
.amouria-gallery .e-gallery-item {
  border-radius: var(--radius-lg, 15px);
  overflow: hidden;
}

.amouria-gallery .e-gallery-item img {
  transition: transform 0.5s ease;
}

.amouria-gallery .e-gallery-item:hover img {
  transform: scale(1.08);
}

/* --- Countdown Boxen --- */
.elementor-countdown-item {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Sticky Header Scroll-Effekt --- */
.elementor-sticky--effects {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

/* --- Top-Bar --- */
#topbar-section {
  transition: transform 0.3s ease;
}

.elementor-sticky--effects ~ #topbar-section,
.admin-bar .elementor-sticky--effects {
  /* Topbar bleibt sichtbar */
}

/* --- Google Maps Styling --- */
.elementor-widget-google_maps iframe {
  border-radius: var(--radius-lg, 15px);
}

/* --- Instagram Sektion --- */
#instagram-section {
  border-top: 1px solid var(--color-neutral-200, #e5e5e5);
  border-bottom: 1px solid var(--color-neutral-200, #e5e5e5);
}

/* --- Hero Scroll-Indikator Animation --- */
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(8px); opacity: 1; }
}

#hero-section .fa-chevron-down {
  animation: bounceDown 2s ease-in-out infinite;
}

/* --- Parallax Countdown Hintergrund --- */
#countdown-section {
  background-attachment: fixed;
}

@media (max-width: 768px) {
  #countdown-section {
    background-attachment: scroll;
  }
}

/* --- Responsive Anpassungen fuer neue Sektionen --- */
@media (max-width: 1024px) {
  .amouria-category-card .elementor-image-box-content {
    padding: 16px 12px;
  }
}

@media (max-width: 768px) {
  .amouria-category-card {
    margin-bottom: 24px;
  }

  .amouria-gallery .e-gallery-columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   ENDE DES AMOURIA DESIGN SYSTEMS

   Zusammenfassung:
   - 15 Hauptsektionen abgedeckt
   - Vollstaendiges Farbsystem (100-900) mit WCAG AA Dokumentation
   - Typografie-Skala mit Crimson Pro + Outfit
   - 8-Punkt-Raster Abstands-System
   - 6-stufiges Schatten-System (sanft und romantisch)
   - 5-stufiges Border-Radius-System
   - Button-Komponenten (4 Varianten, 3 Groessen, alle Zustaende)
   - Karten-Komponenten (Standard, Produkt, Horizontal)
   - Formular-Elemente (alle Zustaende)
   - Sticky Navigation (transparent → solide)
   - Badge/Tag-System (7 Varianten)
   - Footer-Komponente (4-Spalten-Raster)
   - WooCommerce-Integration (Produkte, Buttons, Formulare, Tabs)
   - Responsive Breakpoints (5 Stufen, Mobile-First)
   - Barrierefreiheit (Fokus, Skip-Link, Hochkontrast)
   - Animationen mit reduced-motion Unterstuetzung
   - Keine !important Deklarationen
   - Alle Kommentare auf Deutsch
   ========================================================================== */