.elementor-kit-9{--e-global-color-primary:#1B1F1D;--e-global-color-secondary:#F7F5EF;--e-global-color-text:#3F6B46;--e-global-color-accent:#DB6B1F;--e-global-color-28a0ec7:#2F5D8A;--e-global-color-53ea028:#6B7268;--e-global-color-6792f14:#E4E0D6;--e-global-typography-primary-font-family:"Bricolage Grotesque";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Bricolage Grotesque";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.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);}.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 *//* ============================================================
   KLARTEXTKALORIEN.DE — GLOBALES DESIGN-SYSTEM
   ============================================================
   Einfügen unter: Elementor → Site Settings → Custom CSS
   (oder Theme-eigenes "Additional CSS", falls dein Theme das hat)

   BENUTZUNG:
   Jede Klasse hier (Prefix "kk-") einfach im Advanced-Tab
   eines Elementor-Containers/Widgets unter "CSS Classes"
   eintragen — ohne Punkt, z. B. nur:  kk-btn

   ANNAHME:
   Global Colors & Global Fonts sind in Elementor Site Settings
   bereits angelegt (Bricolage Grotesque / Inter / IBM Plex Mono).
   Die Variablen unten sind eine eigene, unabhängige Ebene nur für
   diese Komponentenklassen — sie kollidieren nicht mit Elementors
   eigenem Farbsystem, halten aber die exakt gleichen Hex-Werte.

   ANIMATIONEN:
   Bewusst kein eigenes Scroll-Reveal-JS hier — nutze stattdessen
   Elementor Pro → Advanced → Motion Effects → Entrance Animation
   pro Widget/Container. Für die sticky Makro-Leiste: Advanced →
   Motion Effects → Sticky = Top (dann braucht .kk-macro-bar
   selbst kein position:sticky mehr).
   ============================================================ */

:root{
  --kk-ink:#1B1F1D;
  --kk-paper:#F7F5EF;
  --kk-card:#FFFFFF;
  --kk-muted:#6B7268;
  --kk-line:#E4E0D6;

  --kk-moss:#3F6B46;
  --kk-moss-soft:#E3EBE1;
  --kk-citrus:#DB6B1F;
  --kk-citrus-soft:#FBE6D4;
  --kk-scale:#2F5D8A;
  --kk-scale-soft:#E2EBF3;

  --kk-radius-lg:26px;
  --kk-radius-md:16px;
  --kk-radius-sm:12px;

  --kk-font-display:'Bricolage Grotesque', sans-serif;
  --kk-font-body:'Inter', sans-serif;
  --kk-font-mono:'IBM Plex Mono', monospace;
}

/* ---------- BASE HELPERS ---------- */
.kk-mono{ font-family:var(--kk-font-mono); }
.kk-display{
  font-family:var(--kk-font-display);
  font-variation-settings:'wght' 650, 'opsz' 30;
  letter-spacing:-0.01em;
  transition:font-variation-settings .3s ease;
}
.kk-muted{ color:var(--kk-muted); }

/* optional: feines Grain-Overlay, auf EINEN Wrapper anwenden (z. B. Site-Container) */
.kk-grain{ position:relative; }
.kk-grain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- EYEBROW / PILL LABEL ---------- */
.kk-eyebrow{
  display:inline-block; font-family:var(--kk-font-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--kk-moss);
  background:var(--kk-moss-soft); padding:4px 10px; border-radius:100px;
}
.kk-cat-chip{
  font-family:var(--kk-font-mono); font-size:.65rem; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.92); color:var(--kk-citrus); padding:5px 10px; border-radius:100px;
}

/* ---------- BUTTONS ---------- */
.kk-btn{
  display:inline-block; font-family:var(--kk-font-mono); font-size:.78rem;
  background:var(--kk-ink); color:var(--kk-paper); padding:11px 20px; border-radius:100px;
  transition:font-variation-settings .3s ease, transform .15s ease;
}
.kk-btn:hover{ transform:translateY(-1px); }
.kk-btn--outline{ background:transparent; color:var(--kk-ink); border:1.5px solid var(--kk-ink); }
.kk-btn--citrus{ background:var(--kk-citrus); color:#fff; }

/* ---------- HERO MESH BACKGROUND ---------- */
.kk-hero-mesh{ position:relative; overflow:hidden; }
.kk-hero-mesh::before{
  content:''; position:absolute; inset:-40% -20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, var(--kk-moss-soft) 0%, transparent 55%),
    radial-gradient(circle at 85% 15%, var(--kk-citrus-soft) 0%, transparent 50%),
    radial-gradient(circle at 60% 90%, var(--kk-scale-soft) 0%, transparent 55%);
  filter:blur(6px);
}
.kk-hero-mesh > *{ position:relative; z-index:1; }

/* ---------- BENTO GRID ---------- */
.kk-bento{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kk-bento-card{ background:var(--kk-paper); border:1px solid var(--kk-line); border-radius:var(--kk-radius-md); padding:16px; }
.kk-bento-card--wide{ grid-column:1 / -1; }
.kk-bento-card--quote{ background:var(--kk-ink); color:var(--kk-paper); }
.kk-bento-card--quote p{ color:#C9CFC9; font-family:var(--kk-font-display); font-size:1.05rem; font-weight:600; line-height:1.35; }

@media (max-width:600px){
  .kk-bento{ grid-template-columns:1fr 1fr; }
}

/* ---------- CHECKLIST ---------- */
.kk-check-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.kk-check-list li{ font-size:.82rem; display:flex; gap:8px; align-items:flex-start; }
.kk-check-list li::before{ content:'✓'; color:var(--kk-moss); font-weight:700; }

/* ---------- NEWSLETTER ---------- */
.kk-newsletter{ padding:20px; border-radius:var(--kk-radius-md); background:var(--kk-ink); color:#fff; }
.kk-newsletter h3{ font-size:1.05rem; margin-bottom:6px; }
.kk-newsletter p{ font-size:.82rem; color:#C9CFC9; margin-bottom:12px; }
.kk-newsletter .kk-nl-row{ display:flex; gap:8px; }
.kk-newsletter input[type="email"]{ flex:1; border:none; border-radius:100px; padding:10px 14px; font-family:var(--kk-font-body); font-size:.82rem; }

/* ---------- POST META & MACRO CHIPS ---------- */
.kk-post-meta{ display:flex; gap:10px; align-items:center; font-family:var(--kk-font-mono); font-size:.7rem; color:var(--kk-muted); flex-wrap:wrap; }
.kk-post-meta .kk-dot{ width:3px; height:3px; border-radius:50%; background:var(--kk-muted); }

.kk-macro-bar{ display:flex; gap:8px; padding:12px 0; overflow-x:auto; }
.kk-macro-chip{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--kk-scale-soft); border-radius:14px; padding:8px 14px; min-width:70px; }
.kk-macro-chip .kk-val{ font-family:var(--kk-font-mono); font-weight:600; font-size:.92rem; color:var(--kk-scale); }
.kk-macro-chip .kk-lbl{ font-family:var(--kk-font-mono); font-size:.6rem; color:var(--kk-muted); text-transform:uppercase; }

/* ---------- ARTICLE / POST-CONTENT TYPOGRAFIE ---------- */
.kk-article p{ font-size:.95rem; line-height:1.55; }
.kk-article blockquote,
.kk-pull-quote{
  border-left:3px solid var(--kk-citrus); padding:4px 0 4px 16px; margin:20px 0;
}
.kk-article blockquote p,
.kk-pull-quote p{ font-family:var(--kk-font-display); font-weight:600; font-size:1.15rem; line-height:1.3; }
.kk-article img{ border-radius:var(--kk-radius-sm); }
.kk-caption{ font-family:var(--kk-font-mono); font-size:.68rem; color:var(--kk-muted); text-align:center; display:block; margin-top:6px; }

/* ---------- INGREDIENT CARD & STEPS ---------- */
.kk-ingredient-card{ background:var(--kk-paper); border:1px solid var(--kk-line); border-radius:var(--kk-radius-md); padding:16px; margin:18px 0; }
.kk-ingredient-card h3{ font-size:.95rem; margin-bottom:10px; }
.kk-ing-row{ display:flex; justify-content:space-between; font-size:.85rem; padding:6px 0; border-bottom:1px dashed var(--kk-line); }
.kk-ing-row:last-child{ border-bottom:none; }
.kk-ing-row .kk-amt{ font-family:var(--kk-font-mono); color:var(--kk-muted); }

.kk-steps{ margin:18px 0; display:flex; flex-direction:column; gap:14px; }
.kk-step{ display:flex; gap:12px; }
.kk-step .kk-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--kk-moss); color:#fff;
  font-family:var(--kk-font-mono); font-weight:600; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
}
.kk-step p{ font-size:.87rem; padding-top:2px; }

/* ---------- MID-ARTICLE CTA ---------- */
.kk-mid-cta{
  padding:16px; border-radius:var(--kk-radius-md); background:var(--kk-citrus-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.kk-mid-cta p{ font-size:.82rem; color:#7A4514; }

/* ---------- RELATED POSTS CARD ---------- */
.kk-related-card{ display:flex; gap:12px; align-items:center; background:var(--kk-paper); border:1px solid var(--kk-line); border-radius:14px; padding:10px; }
.kk-related-thumb{ width:56px; height:56px; border-radius:10px; flex:0 0 auto; overflow:hidden; }
.kk-related-thumb img{ width:100%; height:100%; object-fit:cover; }
.kk-related-card h4{ font-size:.82rem; font-weight:600; margin-bottom:2px; }
.kk-related-card span{ font-family:var(--kk-font-mono); font-size:.66rem; color:var(--kk-muted); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .kk-display, .kk-btn{ transition:none; }
}/* End custom CSS */