.elementor-3625 .elementor-element.elementor-element-28db9c8{--display:flex;--min-height:75vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.3;}.elementor-3625 .elementor-element.elementor-element-28db9c8:not(.elementor-motion-effects-element-type-background), .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kaffeekollektiv-shop.de/wp-content/uploads/2026/08/lucid-origin_Overhead_flat-lay_coffee_photo_plain_unmarked_kraft_paper_bag_tied_with_jute_twi-0-rotated.jpg");background-position:0px -45px;background-repeat:no-repeat;background-size:cover;}.elementor-3625 .elementor-element.elementor-element-28db9c8::before, .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-28db9c8 > .e-con-inner > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-28db9c8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#5D2918;--background-overlay:'';}.elementor-3625 .elementor-element.elementor-element-722aa6c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3625 .elementor-element.elementor-element-ee095ca .elementor-heading-title{color:#FFFFFF;}.elementor-3625 .elementor-element.elementor-element-d89d5a5{text-align:start;}.elementor-3625 .elementor-element.elementor-element-d89d5a5 .elementor-heading-title{color:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3625 .elementor-element.elementor-element-8dbaf06{--display:flex;--min-height:20vh;--justify-content:center;--overlay-opacity:1;}.elementor-3625 .elementor-element.elementor-element-8dbaf06::before, .elementor-3625 .elementor-element.elementor-element-8dbaf06 > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-8dbaf06 > .e-con-inner > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-8dbaf06 > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-8dbaf06 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-8dbaf06 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#5D2918;--background-overlay:'';}.elementor-3625 .elementor-element.elementor-element-66726c1{--display:flex;}.elementor-3625 .elementor-element.elementor-element-07049c6 .elementor-heading-title{font-family:"Newsreader", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-3625 .elementor-element.elementor-element-1d58d37{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3625 .elementor-element.elementor-element-1d58d37::before, .elementor-3625 .elementor-element.elementor-element-1d58d37 > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-1d58d37 > .e-con-inner > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-1d58d37 > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-1d58d37 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-1d58d37 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#F3EFEA;--background-overlay:'';}.elementor-3625 .elementor-element.elementor-element-1d58d37.e-con{--align-self:center;}.elementor-3625 .elementor-element.elementor-element-121fa4d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3625 .elementor-element.elementor-element-121fa4d::before, .elementor-3625 .elementor-element.elementor-element-121fa4d > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-121fa4d > .e-con-inner > .elementor-background-video-container::before, .elementor-3625 .elementor-element.elementor-element-121fa4d > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-121fa4d > .e-con-inner > .elementor-background-slideshow::before, .elementor-3625 .elementor-element.elementor-element-121fa4d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#F3EFEA;--background-overlay:'';}.elementor-3625 .elementor-element.elementor-element-121fa4d.e-con{--align-self:center;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-3625 .elementor-element.elementor-element-fe75cb0{--grid-columns:4;}.elementor-3625 .elementor-element.elementor-element-fe75cb0 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-3625 .elementor-element.elementor-element-4039076{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-3625 .elementor-element.elementor-element-b15bcad{--display:flex;}@media(max-width:1024px){.elementor-3625 .elementor-element.elementor-element-28db9c8{--min-height:54vh;}.elementor-3625 .elementor-element.elementor-element-28db9c8:not(.elementor-motion-effects-element-type-background), .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center left;}.elementor-3625 .elementor-element.elementor-element-fe75cb0{--grid-columns:2;}}@media(max-width:767px){.elementor-3625 .elementor-element.elementor-element-28db9c8:not(.elementor-motion-effects-element-type-background), .elementor-3625 .elementor-element.elementor-element-28db9c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-85px 0px;}.elementor-3625 .elementor-element.elementor-element-722aa6c{--width:80%;}.elementor-3625 .elementor-element.elementor-element-66726c1{--width:80%;}.elementor-3625 .elementor-element.elementor-element-1d58d37{--width:100%;}.elementor-3625 .elementor-element.elementor-element-121fa4d{--width:80%;}.elementor-3625 .elementor-element.elementor-element-fe75cb0{--grid-columns:1;}.elementor-3625 .elementor-element.elementor-element-4039076{--content-width:80%;}}@media(min-width:768px){.elementor-3625 .elementor-element.elementor-element-722aa6c{--width:80%;}.elementor-3625 .elementor-element.elementor-element-66726c1{--width:80%;}.elementor-3625 .elementor-element.elementor-element-1d58d37{--width:100%;}.elementor-3625 .elementor-element.elementor-element-121fa4d{--width:80%;}.elementor-3625 .elementor-element.elementor-element-4039076{--content-width:80%;}}@media(max-width:1024px) and (min-width:768px){.elementor-3625 .elementor-element.elementor-element-722aa6c{--width:80%;}.elementor-3625 .elementor-element.elementor-element-121fa4d{--width:80%;}}/* Start custom CSS for container, class: .elementor-element-28db9c8 *//* ==========================================================================
   SECOND CRACK — HOMEPAGE (page 3625)
   Standalone stylesheet, page-specific. Covers, in page order:
     1. Hero
     2. Manifest / field-feature (edge-to-edge primary-strong band)
     3. Product grid container
     4. "Wer wir sind"

   Structure (from live Elementor Elements tree):
     .elementor-element-28db9c8   = Hero section (outer)
       .elementor-element-722aa6c = Hero inner container (boxed)
         .elementor-element-ee095ca = H1 ("Guter Kaffee beginnt...")
         .elementor-element-d89d5a5 = Subtitle ("Entdecke besondere Kaffees...")
         .elementor-element-1d142b5 = Button wrapper
           .elementor-element-7bba39b = Button widget

     .elementor-element-8dbaf06   = Manifest section (outer)
       .elementor-element-66726c1 = Manifest inner container (boxed)
         .elementor-element-07049c6 = Heading widget carrying the long paragraph

     .elementor-element-1d58d37   = Product grid section (outer)
       .elementor-element-fe75cb0 = Loop Grid widget (WooCommerce products)

     .elementor-element-4039076   = "Wer wir sind" section (outer)
       .elementor-element-b15bcad = Inner container (boxed)
         .elementor-element-3339f6f = Title ("Wer wir sind")
         .elementor-element-4da2ad4 = Paragraph 1
         .elementor-element-52ed503 = Paragraph 2
   ========================================================================== */

:root {
  --color-primary: #834227;
  --color-primary-strong: #5D2918;
  --color-secondary: #6E6862;
  --color-neutral: #F3EFEA;
  --color-surface: #FCFAF6;
  --color-on-surface: #1D1815;
  --color-border: #E2DDD7;

  --font-serif: Newsreader, "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  --radius-md: 8px;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  --content-max: 1280px;
  --page-margin: 64px;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

/* Pinned to a fixed 100% rather than left to whatever percentage width
   Elementor's own Layout panel might have set — a section band is meant to
   run edge-to-edge, so its own width should never be a relative fraction of
   anything, just the full row. The boxed 1280px width lives on the inner
   container instead. */
.elementor-element-28db9c8 {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* padding-left kept independently smaller than the right side: nothing
   sits against the right edge (the photo runs behind it), so only the
   left inset actually decides where the text block starts. */
.elementor-element-722aa6c {
  position: relative !important;
  z-index: 2 !important;
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding-left: var(--space-xl) !important;
  padding-right: var(--page-margin) !important;
}

.elementor-element-ee095ca .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 48px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-on-surface) !important;
  max-width: 20ch !important;
  margin: 0 0 var(--space-md) !important;
}

/* The photo is light-toned throughout, not dark — there's no overlay behind
   this text (that's controlled manually in Elementor now, not by this
   stylesheet), so white text read as low-contrast against it. Dark text
   instead, same as the rest of the page. */
.elementor-element-d89d5a5 .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--color-secondary) !important;
  max-width: 42ch !important;
  margin: 0 0 var(--space-lg) !important;
}

.elementor-element-1d142b5 {
  margin: 0 !important;
}

/* Primary fill — matches the rest of the page's buttons now that the
   background isn't assumed to be a dark overlay. */
.elementor-element-7bba39b .elementor-button {
  background-color: var(--color-primary) !important;
  color: var(--color-surface) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 14px var(--space-lg) !important;
  min-height: 48px !important;
  box-shadow: none !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-element-7bba39b .elementor-button:hover {
  background-color: var(--color-primary-strong) !important;
  color: var(--color-surface) !important;
}

@media (max-width: 1024px) {
  .elementor-element-722aa6c { padding-left: var(--space-lg) !important; padding-right: 40px !important; }
  .elementor-element-ee095ca .elementor-heading-title { font-size: 36px !important; }
  .elementor-element-d89d5a5 .elementor-heading-title { font-size: 17px !important; }
}

@media (max-width: 767px) {
  .elementor-element-722aa6c { padding-left: var(--space-md) !important; padding-right: 20px !important; }
  .elementor-element-ee095ca .elementor-heading-title { font-size: 28px !important; max-width: 16ch !important; }
  .elementor-element-d89d5a5 .elementor-heading-title { font-size: 16px !important; max-width: 32ch !important; }
}

/* ==========================================================================
   2. MANIFEST / FIELD-FEATURE
   Edge-to-edge primary-strong band, one strong gesture per page.
   ========================================================================== */

.elementor-element-8dbaf06 {
  background-color: var(--color-primary-strong) !important;
  padding: var(--space-xl) 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-element-66726c1 {
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--page-margin) !important;
}

/* A Heading widget carrying paragraph text, not a headline — sized and
   weighted like a large serif paragraph, not like an <h1>. */
.elementor-element-07049c6 .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  color: var(--color-surface) !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 1024px) {
  .elementor-element-8dbaf06 { padding: 40px 0 !important; }
  .elementor-element-66726c1 { padding: 0 40px !important; }
  .elementor-element-07049c6 .elementor-heading-title { font-size: 22px !important; }
}

@media (max-width: 767px) {
  .elementor-element-8dbaf06 { padding: 32px 0 !important; }
  .elementor-element-66726c1 { padding: 0 20px !important; }
  .elementor-element-07049c6 .elementor-heading-title { font-size: 19px !important; line-height: 1.5 !important; }
}

/* ==========================================================================
   3. PRODUCT GRID — section background
   Neutral (Kraft), one step down from the Surface-filled cards riding on
   top of it — the tonal contrast that reads as "raised" without a shadow.
   ========================================================================== */

.elementor-element-1d58d37 {
  background-color: var(--color-neutral) !important;
  padding: var(--space-xl) 0 !important;
}

/* Hero, Manifest, and "Wer wir sind" all cap their actual content at 1280px
   through an inner wrapper — this section never got one, so its Loop Grid
   ran the full, unboxed width of the screen and split that into 4 equal
   columns, making every card noticeably wider than anything else on the
   page. Boxing the grid's own inner wrapper the same way brings the cards
   back down to the same content width as the rest of the homepage. */
.elementor-element-1d58d37 > .e-con-inner {
  margin: 0 auto !important;
  padding: 0 var(--page-margin) !important;
}

@media (max-width: 1024px) {
  .elementor-element-1d58d37 > .e-con-inner { padding: 0 40px !important; }
}

@media (max-width: 767px) {
  .elementor-element-1d58d37 > .e-con-inner { padding: 0 20px !important; }
}

/* CSS Grid's default align-items: stretch is kept (not overridden) — the
   card now reserves title/price height itself (loop-item.css), so every
   card is already close to the same height before the grid stretches it
   the rest of the way. Row bottoms land level without the gap that plain
   stretch used to open. */

@media (max-width: 1024px) {
  .elementor-element-1d58d37 { padding: 40px 0 !important; }
}

@media (max-width: 767px) {
  .elementor-element-1d58d37 { padding: 32px 0 !important; }
}

/* ==========================================================================
   4. "WER WIR SIND"
   ========================================================================== */

.elementor-element-4039076 {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: var(--space-xl) 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-element-b15bcad {
  max-width: var(--content-max) !important;
  margin: 0 auto !important;
  padding: 0 var(--page-margin) !important;
}

.elementor-element-3339f6f .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-on-surface) !important;
  margin: 0 0 var(--space-md) !important;
  text-align: left !important;
}

.elementor-element-4da2ad4 .elementor-heading-title,
.elementor-element-52ed503 .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--color-secondary) !important;
  max-width: 60ch !important;
  margin: 0 0 var(--space-md) !important;
  text-align: left !important;
}

.elementor-element-52ed503 .elementor-heading-title {
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element-4039076 { padding: 40px 0 !important; }
  .elementor-element-b15bcad { padding: 0 40px !important; }
  .elementor-element-3339f6f .elementor-heading-title { font-size: 26px !important; }
}

@media (max-width: 767px) {
  .elementor-element-4039076 { padding: 32px 0 !important; }
  .elementor-element-b15bcad { padding: 0 20px !important; }
  .elementor-element-3339f6f .elementor-heading-title { font-size: 22px !important; }
  .elementor-element-4da2ad4 .elementor-heading-title,
  .elementor-element-52ed503 .elementor-heading-title { font-size: 16px !important; }
}

/* ==========================================================================
   Dark mode — separate palette, not an inversion.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .elementor-element-7bba39b .elementor-button {
    background-color: #C88762 !important; /* primary-dark */
    color: #13100D !important;            /* surface-dark */
  }

  .elementor-element-7bba39b .elementor-button:hover {
    background-color: #E0AB86 !important; /* primary-strong-dark */
  }

  .elementor-element-8dbaf06 {
    background-color: #432518 !important; /* subtle-dark, the darkest warm tone available */
  }

  .elementor-element-1d58d37 {
    background-color: #221D1A !important; /* neutral-dark */
  }

  .elementor-element-4039076 {
    background-color: #13100D !important; /* surface-dark */
    border-top-color: #352F2B !important; /* border-dark */
  }

  .elementor-element-3339f6f .elementor-heading-title {
    color: #E2DDD5 !important;            /* on-surface-dark */
  }

  .elementor-element-4da2ad4 .elementor-heading-title,
  .elementor-element-52ed503 .elementor-heading-title {
    color: #97918A !important;            /* secondary-dark */
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-121fa4d */:root {
  --color-primary: #834227;
  --color-primary-strong: #5D2918;
  --color-secondary: #6E6862;
  --color-neutral: #F3EFEA;
  --color-surface: #FCFAF6;
  --color-on-surface: #1D1815;
  --color-border: #E2DDD7;

  --font-serif: Newsreader, "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  --radius-md: 8px;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  --content-max: 1280px;
  --page-margin: 64px;
}

.elementor-element-1d58d37 {
  background-color: var(--color-neutral) !important;
  padding: var(--space-xl) 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element-1d58d37 { padding: 40px 0 !important; }
}

@media (max-width: 767px) {
  .elementor-element-1d58d37 { padding: 32px 0 !important; }
}/* End custom CSS */