.elementor-2251 .elementor-element.elementor-element-05fd822{--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-2251 .elementor-element.elementor-element-5410a43{--display:flex;}.elementor-2251 .elementor-element.elementor-element-5410a43:not(.elementor-motion-effects-element-type-background), .elementor-2251 .elementor-element.elementor-element-5410a43 > .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:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2251 .elementor-element.elementor-element-beb8cb7{--display:flex;--min-height:65vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--flex-wrap:nowrap;--overflow:hidden;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:4px;--padding-left:0px;--padding-right:0px;}.elementor-2251 .elementor-element.elementor-element-beb8cb7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2251 .elementor-element.elementor-element-2ecb869{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.5;}.elementor-2251 .elementor-element.elementor-element-2ecb869::before, .elementor-2251 .elementor-element.elementor-element-2ecb869 > .elementor-background-video-container::before, .elementor-2251 .elementor-element.elementor-element-2ecb869 > .e-con-inner > .elementor-background-video-container::before, .elementor-2251 .elementor-element.elementor-element-2ecb869 > .elementor-background-slideshow::before, .elementor-2251 .elementor-element.elementor-element-2ecb869 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2251 .elementor-element.elementor-element-2ecb869 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.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-2251 .elementor-element.elementor-element-56e8556 .elementor-heading-title{color:#FFFFFF;}.elementor-2251 .elementor-element.elementor-element-32d66cf{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-2251 .elementor-element.elementor-element-32d66cf.e-con{--align-self:center;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group > label, .elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-subgroup label{color:#FFFFFF;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-type-html{padding-bottom:0px;color:#FFFFFF;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group .elementor-field{color:#3E2B22;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFE8D1;border-width:0px 0px 0px 0px;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-field-group .elementor-select-wrapper select{background-color:#FFE8D1;border-width:0px 0px 0px 0px;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .e-form__buttons__wrapper__button-next{background-color:#FFC170;color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-button[type="submit"]{background-color:#FFC170;color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .e-form__buttons__wrapper__button-previous{background-color:#FFC170;color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .e-form__buttons__wrapper__button-next:hover{background-color:#C0784D;color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-button[type="submit"]:hover{background-color:#C0784D;color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-message{font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-message.elementor-message-success{color:#B14F4F;}.elementor-2251 .elementor-element.elementor-element-45f93c9 .elementor-message.elementor-message-danger{color:#EE6E69;}.elementor-2251 .elementor-element.elementor-element-45f93c9{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-2251 .elementor-element.elementor-element-2b6fc86{--display:flex;--min-height:0px;--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;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--margin-top:-24px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2251 .elementor-element.elementor-element-f839928{--display:flex;}.elementor-2251 .elementor-element.elementor-element-66d9191{text-align:center;}.elementor-2251 .elementor-element.elementor-element-66d9191 .elementor-heading-title{color:#FFFFFF;}.elementor-2251 .elementor-element.elementor-element-4d6d2de{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2251 .elementor-element.elementor-element-b166a57{text-align:center;}.elementor-2251 .elementor-element.elementor-element-b166a57 .elementor-heading-title{color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2251 .elementor-element.elementor-element-05fd822{--content-width:100%;}.elementor-2251 .elementor-element.elementor-element-5410a43{--width:100%;}.elementor-2251 .elementor-element.elementor-element-beb8cb7{--width:50%;}.elementor-2251 .elementor-element.elementor-element-32d66cf{--width:80%;}.elementor-2251 .elementor-element.elementor-element-2b6fc86{--width:100%;}.elementor-2251 .elementor-element.elementor-element-f839928{--width:100%;}}/* Start custom CSS for form, class: .elementor-element-45f93c9 */.elementor-2251 .elementor-element.elementor-element-45f93c9 input[type=checkbox]{
    accent-color: #FFC170;

}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-66d9191 */.elementor-2251 .elementor-element.elementor-element-66d9191:hover{
    color: #fbb1ba;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-05fd822 *//* ==========================================================================
   SECOND CRACK — LOGIN (page 2251)
   Standalone stylesheet, page-specific.

   Structure (revised — an image column was added above the login block):
     .elementor-element-05fd822   = section (outer, new)
       .elementor-element-5410a43 = left column — image (placeholder, empty
                                     for now: no image widget added yet)
       .elementor-element-beb8cb7 = right column — the whole login block,
                                     stacked vertically (no longer split
                                     into its own two columns)
         .elementor-element-2ecb869 = title wrapper
           .elementor-element-56e8556 = "Login" heading
         .elementor-element-32d66cf = form + links wrapper
           .elementor-element-45f93c9 = form widget (email, password, remember, submit)
           .elementor-element-2b6fc86 = bottom links group
             .elementor-element-f839928 = register link sub-container
               .elementor-element-66d9191 = "Don't have an account?" link
             .elementor-element-4d6d2de = forgot-password sub-container
               .elementor-element-b166a57 = "Forgot your password?" link
   ========================================================================== */

: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;
  --radius-lg: 12px;

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

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

/* ==========================================================================
   Section — boxed at 1280px, same as every other page. Two columns: image
   on the left, the whole login block on the right.
   ========================================================================== */

.elementor-element-05fd822 {
  /* The two columns now form ONE card, not two separate boxes with a gap
     between them — border/radius/overflow live here on the shared
     wrapper, image and form sit flush against each other inside it. */
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;

  /* At least a gutter worth of space on every viewport width, not just
     ones wider than 1280px + 2×gutter — max-width alone only centres with
     whitespace once the viewport clears max-width by that much. 64px was
     fixed at every breakpoint, including phones — on a 375px screen that's
     128px gone before the card even starts, squeezing everything inside
     it (the "Remember my account" checkbox was wrapping to two lines
     because of this, not because of anything on the checkbox itself). */
  width: calc(100% - (var(--page-margin) * 2)) !important;
  max-width: var(--content-max) !important;
  margin: var(--space-xl) auto !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element-05fd822 {
    width: calc(100% - 80px) !important;   /* 40px gutter each side */
  }
}

@media (max-width: 767px) {
  .elementor-element-05fd822 {
    width: calc(100% - 40px) !important;   /* 20px gutter each side */
    margin: var(--space-lg) auto !important;
  }
}

/* width: 100% forced alongside flex — Elementor's own Width field on a
   container (a fixed px value set in the Layout panel) otherwise beats
   flex-grow and keeps a column at its own fixed size instead of sharing
   the row. */
.elementor-element-5410a43,
.elementor-element-beb8cb7 {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Inset from the shared card's edges lives here now, on the whole right
   column — title, form, and links all get the same margin from the
   card's edges instead of each carrying their own. */
.elementor-element-beb8cb7 {
  padding: var(--space-xl) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (max-width: 767px) {
  .elementor-element-beb8cb7 {
    padding: var(--space-lg) !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-05fd822 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .elementor-element-5410a43,
  .elementor-element-beb8cb7 {
    flex: 0 0 auto !important;
  }

  /* DESIGN.md doesn't centre text, but a page heading sitting flush-left
     above a stacked form on a narrow screen reads as orphaned rather than
     as a page title. Deliberate override, not a default. */
  .elementor-element-56e8556 .elementor-heading-title {
    text-align: center !important;
  }
}

/* ==========================================================================
   Left column — image
   Placeholder styling for now: no image widget exists inside it yet. Once
   one is added, give me its widget ID and I'll add the actual <img>
   sizing/crop rules (same technique as the Kontakt page — fixed min-height,
   object-fit: cover, radius on the container).
   ========================================================================== */

/* No border-radius, no border, no overflow of its own — the shared card
   on the parent (05fd822) already clips and outlines the whole thing.
   This column just needs to be full height and filled with something
   until a real image replaces the placeholder tone. */
.elementor-element-5410a43 {
  background-color: var(--color-neutral) !important;
  align-self: stretch !important;
  min-height: 480px !important;
}

.elementor-element-5410a43 {
  border-radius: calc(16px - 1px) 0 0 calc(16px - 1px) !important;
}

@media (max-width: 767px) {
  .elementor-element-5410a43 {
    min-height: 240px !important;
  }
}

/* ==========================================================================
   Right column — login block (title, then form, stacked)
   ========================================================================== */

.elementor-element-56e8556 .elementor-heading-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 44px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-on-surface) !important;
  margin: 0 0 var(--space-lg) !important;
  text-align: left !important;
}

@media (max-width: 1024px) {
  .elementor-element-56e8556 .elementor-heading-title {
    font-size: 34px !important;
  }
}

/* No card of its own any more — the shared 05fd822 card is the only
   boundary now. This just spaces the fields out from each other; the
   inset from the card's own edges comes from padding on the right column
   (beb8cb7) below, so title, form, and links all share one consistent
   margin from the card's right/top/bottom edges. */
.elementor-element-45f93c9 {
  background-color: transparent !important;
  border: none !important;
}

/* Field labels: small, uppercase, secondary — same as the Kontakt form. */
.elementor-element-45f93c9 .elementor-field-label {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-secondary) !important;
  margin-bottom: var(--space-xs) !important;
}

/* Text/email/password inputs: same border, radius, focus ring as every
   other input on the site — one input style, everywhere. */
.elementor-element-45f93c9 .elementor-field-textual {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 var(--space-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  color: var(--color-on-surface) !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.elementor-element-45f93c9 .elementor-field-textual:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

.elementor-element-45f93c9 .elementor-field-textual::placeholder {
  color: var(--color-secondary) !important;
}

.elementor-element-45f93c9 .elementor-form-fields-wrapper {
  gap: var(--space-md) !important;
}

/* "Remember my account" checkbox — accent colour matches the newsletter
   consent checkbox in the footer, not the browser default blue. */
.elementor-element-45f93c9 input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--color-primary) !important;
}

/* Not .elementor-field-label — this one's a plain <label> inside
   .elementor-field-option, no class of its own. That's why the earlier
   .elementor-2251 .elementor-element.elementor-element-05fd822 missed it and it kept whatever pale default colour the theme
   gives an unstyled label. */
.elementor-element-45f93c9 .elementor-field-type-checkbox .elementor-field-option label {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--color-on-surface) !important;
}

/* Submit button — primary fill, same as every button on the site. */
.elementor-element-45f93c9 .elementor-button {
  width: 100% !important;
  min-height: 48px !important;
  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;
  box-shadow: none !important;
  transition: background-color 150ms ease-out !important;
}

.elementor-element-45f93c9 .elementor-button:hover {
  background-color: var(--color-primary-strong) !important;
}

/* ==========================================================================
   Bottom links — register / forgot password
   ========================================================================== */

.elementor-element-2b6fc86 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--space-sm) var(--space-md) !important;
  margin-top: var(--space-lg) !important;
}

.elementor-element-66d9191 .elementor-heading-title,
.elementor-element-b166a57 .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--color-secondary) !important;
  margin: 0 !important;
}

.elementor-element-66d9191 .elementor-heading-title a,
.elementor-element-b166a57 .elementor-heading-title a {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: color 150ms ease-out, border-color 150ms ease-out !important;
}

.elementor-element-66d9191 .elementor-heading-title a:hover,
.elementor-element-b166a57 .elementor-heading-title a:hover {
  color: var(--color-primary-strong) !important;
  border-bottom-color: var(--color-primary-strong) !important;
}

@media (max-width: 767px) {
  .elementor-element-2b6fc86 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   Dark mode — separate palette, raised surfaces go lighter.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .elementor-element-05fd822 {
    background-color: #13100D !important; /* surface-dark */
    border-color: #352F2B !important;     /* border-dark */
  }

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

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

  .elementor-element-45f93c9 .elementor-field-label,
  .elementor-element-66d9191 .elementor-heading-title,
  .elementor-element-b166a57 .elementor-heading-title {
    color: #97918A !important;            /* secondary-dark */
  }

  .elementor-element-45f93c9 .elementor-field-type-checkbox .elementor-field-option label {
    color: #E2DDD5 !important;
  }

  .elementor-element-45f93c9 .elementor-field-textual {
    background-color: #13100D !important; /* surface-dark */
    color: #E2DDD5 !important;
    border-color: #352F2B !important;     /* border-dark */
  }

  .elementor-element-45f93c9 input[type="checkbox"],
  .elementor-element-66d9191 .elementor-heading-title a,
  .elementor-element-b166a57 .elementor-heading-title a {
    accent-color: #C88762 !important;     /* primary-dark */
    color: #C88762 !important;
  }

  .elementor-element-66d9191 .elementor-heading-title a:hover,
  .elementor-element-b166a57 .elementor-heading-title a:hover {
    color: #E0AB86 !important;            /* primary-strong-dark */
    border-bottom-color: #E0AB86 !important;
  }

  .elementor-element-45f93c9 .elementor-button {
    background-color: #C88762 !important; /* primary-dark */
    color: #13100D !important;            /* surface-dark */
  }

  .elementor-element-45f93c9 .elementor-button:hover {
    background-color: #E0AB86 !important; /* primary-strong-dark */
  }
}/* End custom CSS */