/* ============================================
   IMMOWEB TEMPLATE 2026 · CUSTOM COMPONENTS
   ============================================ */


/* --- Hintergrund-Utilities --- */
.bg-brand-1 { background-color: var(--brand-1); }
.bg-brand-2 { background-color: var(--brand-2); }
.bg-light-1 { background-color: var(--light-1); }
.bg-light-2 { background-color: var(--light-2); }
.bg-light-3 { background-color: var(--light-3); }
.bg-dark-1  { background-color: var(--dark-1); }
.bg-dark-2  { background-color: var(--dark-2); }
.bg-dark-3  { background-color: var(--dark-3); }

/* ============================================
   ON-DARK – Text auf dunklem Grund
   --------------------------------------------
   Direkt aufs Heading-/Text-Widget setzen (nicht auf Container).
   Schaltet die Textfarbe hell – funktioniert überall gleich
   (Cards, dunkle Sektionen, Footer).
   Vergabe: "heading-l on-dark" bzw. "body-m on-dark"
   ============================================ */

/* Headings → weiß */
.elementor-element.on-dark.heading-xl .elementor-heading-title,
.elementor-element.on-dark.heading-l  .elementor-heading-title,
.elementor-element.on-dark.heading-m  .elementor-heading-title,
.elementor-element.on-dark.heading-s  .elementor-heading-title,
.elementor-element.on-dark.heading-xs .elementor-heading-title,
.elementor-element.on-dark[class*="heading-"] .elementor-heading-title {
  color: var(--light-1);
}

/* Body → hell-grau (Hierarchie bleibt erhalten) */
.elementor-element.on-dark.body-l,
.elementor-element.on-dark.body-m,
.elementor-element.on-dark[class*="body-"] :is(p, li) {
  color: var(--light-3);
}


/* ============================================
   TYPOGRAPHY – Tailwind-Subset
   Eine Klasse = fertige Typo (Font, Größe, Weight, Line-Height).
   Fluid via clamp() bei Headings, fixe Werte bei Body.
   ============================================ */

/* --- Headings --- */
.heading-xl {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);   /* 36 → 56px */
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}
.heading-l {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem); /* 30 → 44px */
  font-weight: 270;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}
.heading-m {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);     /* 24 → 32px */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.heading-s {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);   /* 20 → 24px */
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-heading);
}
.heading-xs {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);/* 18 → 20px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-heading);
}

/* --- Body --- */
.body-l {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);/* 18 → 20px */
  line-height: 1.6;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.body-m {
  font-family: var(--font-body);
  font-size: 1rem;                                      /* 16px */
  line-height: 1.7;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.body-s {
  font-family: var(--font-body);
  font-size: 0.875rem;                                  /* 14px */
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Elementor-Bridge: Klasse am Wrapper → inneres Element ---
   Elementor setzt die Custom-Class auf den Widget-Wrapper. Die Typo muss
   aufs innere .elementor-heading-title / <p> greifen. .elementor-element
   davor schlägt Elementors Kit-CSS ohne !important. */
.elementor-element.heading-xl .elementor-heading-title { font: inherit; letter-spacing: inherit; color: inherit; }
.elementor-element.heading-l  .elementor-heading-title { font: inherit; letter-spacing: inherit; color: inherit; }
.elementor-element.heading-m  .elementor-heading-title { font: inherit; letter-spacing: inherit; color: inherit; }
.elementor-element.heading-s  .elementor-heading-title { font: inherit; letter-spacing: inherit; color: inherit; }
.elementor-element.heading-xs .elementor-heading-title { font: inherit; letter-spacing: inherit; color: inherit; }
.elementor-element[class*="body-"] :is(p, li) { font: inherit; color: inherit; }


/* ============================================
   SECTION-SYSTEM
   --------------------------------------------
   Vertikaler Rhythmus + Seiten-Padding in EINER Klasse (section-*).
   Größen: xxl · xl · l · m · s · xs · xxs · header
   Fluid via clamp() (skaliert zwischen min/max je Viewport).
   Basis- + Responsive-Variablen liegen im TOKEN-Snippet.

   VERWENDUNG in Elementor:
     section-*  → auf den Sektions-Container (+ bg-* für Hintergrund)
     section-narrow / -narrow-xs → begrenzt Inhaltsbreite (Container "Boxed")

   HINWEIS zu !important beim Seiten-Padding: nötig, um Elementors eigenes
   Container-Padding zu überschreiben. Bewusste Ausnahme, kein Muster.
   ============================================ */

/* --- Vertikales Padding je Größe (seitliches Padding läuft zentral über .e-con-inner) --- */
.section-xxl {
  padding-top:    clamp(var(--section-xxl-min), 1.1vw + 9.13rem, var(--section-xxl-max));
  padding-bottom: clamp(var(--section-xxl-min), 1.1vw + 9.13rem, var(--section-xxl-max));
}
.section-xl {
  padding-top:    clamp(var(--section-xl-min), 1.1vw + 6.63rem, var(--section-xl-max));
  padding-bottom: clamp(var(--section-xl-min), 1.1vw + 6.63rem, var(--section-xl-max));
}
.section-l {
  padding-top:    clamp(var(--section-l-min), 1.1vw + 5.38rem, var(--section-l-max));
  padding-bottom: clamp(var(--section-l-min), 1.1vw + 5.38rem, var(--section-l-max));
}
.section-m {
  padding-top:    var(--section-m-min);
  padding-bottom: var(--section-m-min);
}
.section-s {
  padding-top:    var(--section-s-min);
  padding-bottom: var(--section-s-min);
}
.section-xs {
  padding-top:    var(--section-xs-min);
  padding-bottom: var(--section-xs-min);
}
.section-xxs {
  padding-top:    var(--section-xxs-min);
  padding-bottom: var(--section-xxs-min);
}
.section-header {
  padding-top:    var(--section-header-min);
  padding-bottom: var(--section-header-min);
}

/* --- Horizontale Begrenzung: Inhalt auf container-max, zentriert, festes Padding.
   Identisch zum Nav-Prinzip → Nav und Section-Content fluchten auf jeder Breite.
   Padding über --content-x (Token), damit Nav und Sections denselben Wert nutzen. --- */
[class*="section-"] > .e-con-inner {
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--content-x) !important;
}

/* --- Hero: Mindesthöhe + Inhalt vertikal zentriert --- */
.section-hero {
  min-height: var(--section-hero-height) !important;
}
.section-hero > .e-con-inner {
  justify-content: center !important;
}

/* --- Schmalere Content-Breite (überschreibt die Standard-max-width) --- */
.section-narrow > .e-con-inner {
  max-width: var(--section-narrow) !important;
}
.section-narrow-xs > .e-con-inner {
  max-width: var(--section-narrow-xs) !important;
}

/* --- Volle Breite ohne Begrenzung (randlose Inhalte) --- */
.section-full > .e-con-inner {
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* --- Offset für Overlay-Header (Hero unter transparentem Header) --- */
.section-offset {
  padding-top: calc(var(--section-offset-header) + var(--section-xxl-min));
}

/* ============================================
   LAYOUT-UTILITIES – Tailwind-Subset
   --------------------------------------------
   Echtes Tailwind-Naming. Für Sonderfälle & feine Kontrolle.
   Mobile-First: Basis = mobil, md:/lg: greifen ab Breakpoint.
   Steuerung über Custom-Class-Field, nie Elementor-Layout-Controls.
   Elementor-Container immer auf "Volle Breite" (Klasse setzt display selbst).
   ============================================ */

/* --- Display --- */
.grid   { display: grid; }
.flex   { display: flex; }
.block  { display: block; }
.hidden { display: none; }

/* --- Display-Utilities gehärtet (schlagen Elementors Container-Layout) --- */
.elementor-element.grid  { display: grid !important; }
.elementor-element.flex  { display: flex !important; }
.elementor-element.block { display: block !important; }
.elementor-element.hidden { display: none !important; }

/* --- Grid-Spalten (Basis = mobil) --- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Grid-Spannweite (col-span) --- */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }

/* --- Flex-Richtung / Wrap --- */
.flex-row  { flex-direction: row; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* --- Gap (Tailwind-Skala: 4 = 1rem) --- */
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* ============================================
   GAP-OVERRIDES (Utilities schlagen Pattern-Gaps)
   --------------------------------------------
   .elementor-element-Prefix + !important: überschreibt die festen Gaps
   der Layout-Patterns (stack/cluster/split-2/card-grid). Muss NACH den
   Patterns stehen. Ermöglicht "stack gap-4", "card-grid gap-8" usw.
   ============================================ */
.elementor-element.gap-0 { gap: 0 !important; }
.elementor-element.gap-2  { gap: 0.5rem !important; }
.elementor-element.gap-3  { gap: 0.75rem !important; }
.elementor-element.gap-4  { gap: 1rem !important; }
.elementor-element.gap-6  { gap: 1.5rem !important; }
.elementor-element.gap-8  { gap: 2rem !important; }
.elementor-element.gap-10 { gap: 2.5rem !important; }
.elementor-element.gap-12 { gap: 3rem !important; }
.elementor-element.gap-16 { gap: 4rem !important; }

/* --- Align (Cross-Achse) --- */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* --- Justify (Haupt-Achse) --- */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* --- Responsive: md ab 768px (Tablet+) --- */
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:hidden   { display: none; }
  .md\:block    { display: block; }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
}

/* --- Responsive: lg ab 1024px (Desktop) --- */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* ============================================
   GRID-COLS-OVERRIDES (Utilities schlagen Pattern-Cols)
   --------------------------------------------
   .elementor-element-Prefix + !important: überschreibt die festen
   Spaltenzahlen der Layout-Patterns (card-grid). Analog zu den
   Gap-Overrides. Muss NACH den Patterns stehen.
   Ermöglicht "card-grid lg:grid-cols-2" usw.
   ============================================ */
.elementor-element.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
.elementor-element.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
.elementor-element.grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
.elementor-element.grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }

@media (min-width: 768px) {
  .elementor-element.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; }
  .elementor-element.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .elementor-element.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .elementor-element.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width: 1024px) {
  .elementor-element.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .elementor-element.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .elementor-element.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* ============================================================
   ICON-LIST · GLOBALE HÄRTUNG (Footer, Card-Meta, Kontaktlisten)
   ------------------------------------------------------------
   Problem: Elementor Icon-List-Icons rendern mit 14px (Default) und
   ihre Farbe hängt an einer per-Widget zugewiesenen Elementor Global
   Color (--e-global-color-…) statt an einer DS-Klasse. Global Colors
   werden per ID-Selektor gerendert → schlagen normale Klassen-Regeln.

   Lösung (2 Teile):
     1. Globale Default-GRÖSSE für alle Listen-Icons (nie wieder 14px-Mini).
     2. icon-list-accent: explizite Gold-Farbe + Größe, GEHÄRTET
        (.elementor-element + !important) → schlägt Global-Color-ID-Regeln.

   Grundsatz bleibt: Elementor Global Colors im Kit (Website-Einstellungen
   → Global Colors) hart auf die Markenfarben setzen. Diese Klasse macht
   die Icons zusätzlich unabhängig von versehentlichen Farb-Zuweisungen.

   Einbau: ans Ende des Core-Snippets (Prio 30), NACH der globalen
   Icon-Basis (.elementor-icon svg …), damit die Härtung greift.
   ============================================================ */


/* ============================================
   1 · GLOBALE DEFAULT-GRÖSSE für Listen-Icons
   --------------------------------------------
   Hebt alle Icon-List-Icons von 14px auf sichtbare 18px.
   Farbe bleibt hier bewusst unangetastet (Kontext/Global Color),
   nur die Größe wird global geregelt.
   ============================================ */
.elementor-widget-icon-list .elementor-icon-list-icon svg {
  width: 1.125rem;                   /* 18px statt 14px */
  height: 1.125rem;
}


/* ============================================
   2 · ICON-LIST-ACCENT – Gold-Icons, gehärtet
   --------------------------------------------
   Für alle Icon-Listen, deren Icons gezielt in Markenfarbe (Gold)
   erscheinen sollen: Footer-Kontakt, Card-Meta (Fläche/Zimmer/Bäder),
   Kontaktzeilen. Setzt Farbe + Größe EXPLIZIT und schlägt via
   .elementor-element + !important die Elementor-Global-Color-ID-Regel.

   Vergabe: "icon-list-accent" auf das Icon-List-Widget.
   White-label: Farbe kommt aus --brand-2 → Kunde ändert nur den Token.
   ============================================ */
.elementor-element.icon-list-accent .elementor-icon-list-icon svg {
  width: 1.125rem !important;        /* 18px */
  height: 1.125rem !important;
  fill: none !important;             /* Lucide: nur Kontur */
  stroke: var(--brand-2) !important; /* Gold – schlägt Global Color */
  stroke-width: 2 !important;
}
/* Elementor rendert die Icon-Farbe teils über die Icon-Variable */
.elementor-element.icon-list-accent .elementor-icon-list-icon {
  color: var(--brand-2) !important;
  --e-global-color-primary: var(--brand-2);   /* falls per Global Color gebunden */
}

/* Text neben dem Icon bleibt DS-konform (nicht gold, gut lesbar).
   Greift NICHT, wenn das Widget zusätzlich on-dark/body-* trägt –
   die bestimmen die Textfarbe weiterhin selbst. */
.elementor-element.icon-list-accent .elementor-icon-list-text {
  color: var(--color-text);
}

/* Icon ↔ Text-Abstand */
.elementor-element.icon-list-accent .elementor-icon-list-icon {
  margin-right: 0.4rem;
}


/* ============================================
   3 · ICON-LIST-ACCENT · on-dark
   --------------------------------------------
   Auf dunklem Grund (Footer): Icons bleiben gold, Text hell.
   Vergabe: "icon-list-accent on-dark"
   ============================================ */
.elementor-element.icon-list-accent.on-dark .elementor-icon-list-text,
.elementor-element.icon-list-accent.on-dark .elementor-icon-list-text a {
  color: var(--light-3) !important;
}
.elementor-element.icon-list-accent.on-dark .elementor-icon-list-item:hover .elementor-icon-list-text,
.elementor-element.icon-list-accent.on-dark .elementor-icon-list-item:hover .elementor-icon-list-text a {
  color: var(--light-1) !important;
}