.elementor-kit-11{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   SAY WHAT. SIMONE — DESIGN SYSTEM (Final)
   Design: Kathy Alume · nur Simones Farben & Schriften
   Einfügen in: Elementor → Site Settings → Custom CSS
   ============================================================ */

/* ----- FONTS -----
   Fraunces + DM Sans bitte lokal über Elementor → Custom Fonts laden
   (DSGVO). Wenn lokal geladen, KEIN @import nötig.
   Nur falls du sie doch über Google ziehst, diese Zeile aktivieren:
   @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');
*/

/* ============================================================
   DESIGN TOKENS — nur Simones Palette
   ============================================================ */
:root{
  --sim-petrol:   #1A4A4A;
  --sim-cream:    #F2EDE4;
  --sim-rust:     #974315;
  --sim-karamell: #F2D6AC;
  --sim-paper:    #FAF8F4;
  --sim-ink:      #2C1A0E;
  --sim-mut:      #9A8F7F;
  --sim-line:     rgba(44,26,14,0.14);

  --sim-fd:'Fraunces', serif;
  --sim-fb:'DM Sans', sans-serif;

  /* Subtile Papier-Textur (wie in Simones Insta-Posts) */
  --sim-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================================
   GLOBAL
   ============================================================ */
body, .e-con, .elementor-section{ background-color: var(--sim-paper); }

/* Papier-Textur: rein als Hintergrundbild, KEINE Struktur-/Positions-Eingriffe */
.elementor-section{ background-image: var(--sim-tex); background-repeat: repeat; }

h1,h2,h3,h4,h5,h6,.elementor-heading-title{
  font-family: var(--sim-fd) !important;
  color: var(--sim-petrol) !important;
  font-weight: 400;
  line-height: 1.15;
}
body, p, .elementor-widget-text-editor{
  font-family: var(--sim-fb) !important;
  color: var(--sim-ink);
  line-height: 1.8;
}

/* Großbuchstaben-Akzent (statt kursiv) — Klasse an <span> im Text */
.sim-cap{ text-transform: uppercase; font-style: normal; color: var(--sim-rust) !important; font-weight: 500; }
.sim-cap-karamell{ text-transform: uppercase; font-style: normal; color: var(--sim-karamell) !important; font-weight: 400; }

/* Eyebrow / Mini-Label — Klasse an ein Heading-Widget (HTML-Tag: p) */
.sim-eyebrow .elementor-heading-title,
.sim-eyebrow{
  font-family: var(--sim-fb) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--sim-rust) !important;
}
.sim-eyebrow-karamell .elementor-heading-title{ color: var(--sim-karamell) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.sim-btn .elementor-button{
  font-family: var(--sim-fb) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background-color: var(--sim-petrol) !important;
  color: var(--sim-cream) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 15px 30px !important;
  transition: transform .25s ease, background .25s ease !important;
}
.sim-btn .elementor-button:hover{
  transform: translateY(-3px) !important;
  background-color: #143a3a !important;
}
/* Heller Button (auf dunklem Hintergrund) */
.sim-btn-cream .elementor-button{
  background-color: var(--sim-cream) !important;
  color: var(--sim-petrol) !important;
}

/* Text-Link mit Unterstrich + Pfeil */
.sim-link a, a.sim-link{
  font-family: var(--sim-fb) !important;
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sim-ink); text-decoration: none;
  border-bottom: 1.5px solid var(--sim-rust); padding-bottom: 4px;
}

/* ============================================================
   HINTERGRUND-KLASSEN (an Section/Column)
   ============================================================ */
.sim-bg-paper{ background-color: var(--sim-paper) !important; }
.sim-bg-cream{ background-color: var(--sim-cream) !important; }
.sim-bg-petrol{ background-color: var(--sim-petrol) !important; }
.sim-bg-karamell{ background-color: var(--sim-karamell) !important; }

/* Auf dunklem Petrol: helle Schrift */
.sim-on-dark h1,.sim-on-dark h2,.sim-on-dark h3,.sim-on-dark .elementor-heading-title{ color: var(--sim-cream) !important; }
.sim-on-dark p,
.sim-on-dark .elementor-widget-text-editor,
.sim-on-dark .elementor-widget-text-editor p,
.sim-on-dark .elementor-widget-text-editor div{ color: rgba(242,237,228,0.82) !important; }

/* Foto-Spalten: sichtbarer Platzhalter (Karamell), bis ein Bild eingesetzt wird */
.sim-photo-col{ background-color: var(--sim-karamell) !important; min-height: 460px; }
.sim-photo-col .elementor-widget-image,
.sim-photo-col .elementor-widget-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   HERO — Foto links überlappt die dunkle Sektion darunter
   Foto-Spalte: Klasse .sim-hero-photo
   ============================================================ */
.sim-hero-photo{
  margin-bottom: -90px !important;
  position: relative; z-index: 2;
}
@media (max-width: 1024px){ .sim-hero-photo{ margin-bottom: 0 !important; } }

.sim-hero-h .elementor-heading-title{
  font-size: 50px; font-weight: 300; line-height: 1.08; letter-spacing: -0.5px;
  color: var(--sim-petrol) !important;
}

/* Value-Sektion braucht oben mehr Luft, damit das Hero-Foto Platz hat */
.sim-value{ padding-top: 150px !important; padding-bottom: 84px !important; }
@media (max-width: 1024px){ .sim-value{ padding-top: 64px !important; } }

/* ============================================================
   PAIN-POINTS — Karte überlappt das Foto
   ============================================================ */
.sim-pain-card{
  background: var(--sim-cream) !important;
  padding: 54px 48px !important;
  position: relative; z-index: 2;
  margin-right: -60px !important;
}
@media (max-width: 1024px){ .sim-pain-card{ margin-right: 0 !important; } }
.sim-pain-list ul{ list-style: none; margin: 0 0 26px; padding: 0; }
.sim-pain-list li{
  font-family: var(--sim-fb); font-size: 14px; line-height: 1.6;
  color: var(--sim-ink); opacity: .8; padding-left: 22px; position: relative; margin-bottom: 12px;
}
.sim-pain-list li::before{
  content:''; position:absolute; left:0; top:9px; width:6px; height:6px;
  background: var(--sim-rust); border-radius:50%;
}
.sim-pain-bold .elementor-heading-title,
.sim-pain-bold{
  font-family: var(--sim-fb) !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--sim-rust) !important;
}

/* ============================================================
   LEISTUNGEN — Karten ohne Foto (Hover-Lift)
   ============================================================ */
.sim-off-card{
  border: 1px solid var(--sim-line) !important;
  padding: 40px 32px !important;
  background: var(--sim-paper) !important;
  height: 100%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease !important;
}
.sim-off-card:hover{
  transform: translateY(-8px);
  border-color: var(--sim-petrol) !important;
  box-shadow: 0 20px 44px rgba(44,26,14,.09);
}
.sim-off-num .elementor-heading-title{
  font-family: var(--sim-fd) !important; font-size: 44px !important; font-style: normal !important;
  font-weight: 400 !important; color: var(--sim-rust) !important; line-height: 1 !important;
  transition: color .35s ease;
}
.sim-off-card:hover .sim-off-num .elementor-heading-title{ color: var(--sim-petrol) !important; }
.sim-off-name .elementor-heading-title{ font-size: 24px !important; color: var(--sim-petrol) !important; }

/* ============================================================
   ARBEITSWEISE — Raster mit Linien
   ============================================================ */
.sim-work-cell{ background: var(--sim-paper) !important; padding: 36px 32px !important; transition: background .35s ease; }
.sim-work-cell:hover{ background: var(--sim-cream) !important; }
.sim-work-num .elementor-heading-title{
  font-family: var(--sim-fd) !important; font-size: 32px !important; font-style: italic !important;
  font-weight: 300 !important; color: var(--sim-karamell) !important;
}

/* ============================================================
   TESTIMONIALS — Karten mit Anführungszeichen
   ============================================================ */
.sim-test-card{
  background: var(--sim-paper) !important; padding: 40px 36px !important; height: 100%;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.sim-test-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(44,26,14,.08); }
.sim-test-mark .elementor-heading-title{
  font-family: var(--sim-fd) !important; font-size: 54px !important; color: var(--sim-karamell) !important;
  line-height: .6 !important;
}
.sim-test-q .elementor-widget-text-editor,
.sim-test-q{
  font-family: var(--sim-fd) !important; font-size: 16px !important; line-height: 1.65 !important;
  color: var(--sim-ink) !important;
}
.sim-test-q em{ font-style: italic; color: var(--sim-rust); }

/* Testimonial: Foto rund neben Name */
.sim-test-person{ border-top: 1px solid var(--sim-line); padding-top: 18px !important; margin-top: 8px; align-items: center; }
.sim-test-photo-col{ display: flex; align-items: center; min-height: auto !important; background: transparent !important; }
.sim-test-avatar img{ width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.sim-test-meta{ display: flex; flex-direction: column; justify-content: center; }

/* ============================================================
   CTA — Foto mit Petrol-Overlay
   ============================================================ */
.sim-cta{ position: relative; }
.sim-cta::before{ content:''; position:absolute; inset:0; background: rgba(26,74,74,0.62); z-index:0; }
.sim-cta > .elementor-container{ position: relative; z-index: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.sim-footer{ background: var(--sim-petrol) !important; }
.sim-footer .elementor-heading-title{ color: var(--sim-cream) !important; }
.sim-footer a{ color: rgba(242,237,228,0.6) !important; text-decoration: none; }
.sim-footer a:hover{ color: var(--sim-cream) !important; }

/* ============================================================
   MOBILE
   ============================================================ */
/* ============================================================
   INSTA-HOOK-BLOCK (neue Sektion) — Simones Feed-Sprache
   Sektion-Hintergrund auf Cream (#F2EDE4) stellen.
   ============================================================ */
/* fette Hook-Zeile in Rust (DM Sans Bold) — Klasse: sim-hook-h */
.sim-hook-h .elementor-heading-title{
  font-family: var(--sim-fb) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.5px !important;
  color: var(--sim-rust) !important;
}
/* Serif-Spoiler darunter — Klasse: sim-hook-sub (am Text-Editor) */
.sim-hook-sub .elementor-widget-text-editor,
.sim-hook-sub p{
  font-family: var(--sim-fd) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--sim-ink) !important;
}
/* Durchstreich-Effekt — im Text: <span class="sim-strike">…</span> */
.sim-strike{ text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.75; }

@media (max-width: 767px){
  .sim-hook-h .elementor-heading-title{ font-size: 27px !important; }
  .sim-hook-sub .elementor-widget-text-editor,.sim-hook-sub p{ font-size: 19px !important; }
}/* End custom CSS */