.elementor-2180 .elementor-element.elementor-element-42d8d5d{--display:flex;--min-height:95vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;}.elementor-2180 .elementor-element.elementor-element-42d8d5d:not(.elementor-motion-effects-element-type-background), .elementor-2180 .elementor-element.elementor-element-42d8d5d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3E2B22;}.elementor-2180 .elementor-element.elementor-element-ecc7941{--display:flex;--overlay-opacity:0.5;}.elementor-2180 .elementor-element.elementor-element-ecc7941::before, .elementor-2180 .elementor-element.elementor-element-ecc7941 > .elementor-background-video-container::before, .elementor-2180 .elementor-element.elementor-element-ecc7941 > .e-con-inner > .elementor-background-video-container::before, .elementor-2180 .elementor-element.elementor-element-ecc7941 > .elementor-background-slideshow::before, .elementor-2180 .elementor-element.elementor-element-ecc7941 > .e-con-inner > .elementor-background-slideshow::before, .elementor-2180 .elementor-element.elementor-element-ecc7941 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{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-overlay:'';}.elementor-2180 .elementor-element.elementor-element-7264ddf{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.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-2180 .elementor-element.elementor-element-a89a78f{text-align:center;}.elementor-2180 .elementor-element.elementor-element-a89a78f .elementor-heading-title{color:#FFFFFF;}.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-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group > label, .elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-subgroup label{color:#FFFFFF;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-type-html{padding-bottom:0px;color:#7A7A7A;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group .elementor-field{color:#3E2B22;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#FFE8D1;border-width:1px 1px 1px 1px;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-field-group .elementor-select-wrapper select{background-color:#FFE8D1;border-width:1px 1px 1px 1px;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-button span{justify-content:center;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .e-form__buttons__wrapper__button-next{background-color:#FFC170;color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-button[type="submit"]{background-color:#FFC170;color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .e-form__buttons__wrapper__button-previous{background-color:#FFC170;color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .e-form__buttons__wrapper__button-next:hover{background-color:#C0784D;color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-button[type="submit"]:hover{background-color:#C0784D;color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-2180 .elementor-element.elementor-element-e73d7e6{--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;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-2180 .elementor-element.elementor-element-42d8d5d{--width:100%;}.elementor-2180 .elementor-element.elementor-element-ecc7941{--content-width:100%;}.elementor-2180 .elementor-element.elementor-element-7264ddf{--width:80%;}}/* Start custom CSS for container, class: .elementor-element-42d8d5d *//* ==========================================================================
   SECOND CRACK — REGISTRATION (page 2180)
   Standalone stylesheet, page-specific. Same unified-card pattern as
   login.css — this is its paired page and should read as one system.

   Structure:
     .elementor-element-42d8d5d = section (outer, the shared card)
       .elementor-element-ecc7941 = left column — image
       .elementor-element-7264ddf = right column — title + form
         .elementor-element-a89a78f = "Registration" heading
         .elementor-element-e73d7e6 = form widget (fname, lname, email,
                                       cemail, pass, cpass, state, bdate,
                                       submit)
   ========================================================================== */

: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-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

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

/* ==========================================================================
   Section — the shared card. Two columns, no gap between them, one
   border/radius/overflow around the whole thing — same technique as
   login.css, not two separate boxes.
   ========================================================================== */

.elementor-element-42d8d5d {
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;

  /* Same gutter logic as login.css: fixed at every breakpoint would leave
     almost no room on a phone screen. */
  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-42d8d5d {
    width: calc(100% - 80px) !important;   /* 40px gutter each side */
  }
}

@media (max-width: 767px) {
  .elementor-element-42d8d5d {
    width: calc(100% - 40px) !important;   /* 20px gutter each side */
    margin: var(--space-lg) auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* width: 100% forced alongside flex — Elementor's own Width field on a
   container otherwise beats flex-grow and keeps a column at its own fixed
   size instead of sharing the row. */
.elementor-element-ecc7941,
.elementor-element-7264ddf {
  flex: 1 1 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 767px) {
  .elementor-element-ecc7941,
  .elementor-element-7264ddf {
    flex: 0 0 auto !important;
  }

  /* Deliberate override of the no-centred-text rule, same reasoning as
     the Login page: a flush-left title above a stacked form on a narrow
     screen reads as orphaned rather than as a page heading. */
  .elementor-element-a89a78f .elementor-heading-title {
    text-align: center !important;
  }
}

/* ==========================================================================
   Left column — image
   Radius only on the two left corners (inset 1px for the shared card's
   own border, same fix as the product-card image). No radius on the
   right corners — that edge meets the form column, no curve needed there.
   ========================================================================== */

.elementor-element-ecc7941 {
  background-color: var(--color-neutral) !important;
  align-self: stretch !important;
  min-height: 480px !important;
  border-radius: 15px 0 0 15px !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .elementor-element-ecc7941 {
    min-height: 240px !important;
    border-radius: 15px 15px 0 0 !important;
  }
}

.elementor-element-ecc7941 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ==========================================================================
   Right column — title + form
   ========================================================================== */

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

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

.elementor-element-a89a78f .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-a89a78f .elementor-heading-title {
    font-size: 34px !important;
  }
}

/* No card of its own — the shared 42d8d5d card is the only boundary. */
.elementor-element-e73d7e6 {
  background-color: transparent !important;
  border: none !important;
}

/* Field labels: small, uppercase, secondary — same as every form on the
   site (Kontakt, Login). */
.elementor-element-e73d7e6 .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/date/select inputs: same border, radius, focus ring
   as every input on the site — one input style, everywhere, regardless of
   how many fields this particular form has. */
.elementor-element-e73d7e6 .elementor-field-textual,
.elementor-element-e73d7e6 select.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-e73d7e6 .elementor-field-textual:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

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

/* Tighter vertical gap than Login's 16px — eight fields at 16px apart
   would run noticeably longer than eight at 12px, and the pairs (First/
   Last Name, State/Birth Date) already carry their own column gap. */
.elementor-element-e73d7e6 .elementor-form-fields-wrapper {
  row-gap: var(--space-md) !important;
  column-gap: var(--space-md) !important;
}

/* Submit button — primary fill, same as every button on the site. */
.elementor-element-e73d7e6 .elementor-button {
  width: 100% !important;
  min-height: 48px !important;
  margin-top: var(--space-sm) !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-e73d7e6 .elementor-button:hover {
  background-color: var(--color-primary-strong) !important;
}

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

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

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

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

  .elementor-element-e73d7e6 .elementor-field-label {
    color: #97918A !important;            /* secondary-dark */
  }

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

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

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