/* ==========================================================================
   Powermail – contact form
   Two-column layout for short fields on wider screens, one column on phones.
   ========================================================================== */

/* The form title and page legend were not shown on the old site */
.powermail_form > h3,
.powermail_legend { display: none; }

.tx-powermail,
.tx-powermail .container-fluid { width: 100%; max-width: none; padding: 0; }

.tx-powermail .powermail_form { margin: 0; width: 100%; }
/* The form carries Foundation's "row" class (flex container); make the fieldset use the full width */
.tx-powermail .powermail_form > .powermail_fieldset { flex: 1 1 100%; width: 100%; max-width: 100%; }

.tx-powermail .powermail_fieldset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

/* Powermail wraps fields in Foundation rows; let the fields take part in the grid directly */
.tx-powermail .powermail_fieldset > .row { display: contents; }
.tx-powermail .powermail_fieldwrap {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}

@media screen and (min-width: 40em) {
  .tx-powermail .powermail_fieldset { grid-template-columns: 1fr 1fr; }
  .tx-powermail .powermail_fieldwrap_firma,
  .tx-powermail .powermail_fieldwrap_webseite,
  .tx-powermail .powermail_fieldwrap_type_textarea,
  .tx-powermail .powermail_fieldwrap_type_submit { grid-column: 1 / -1; }
}

.tx-powermail .powermail_label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #3a3a3a;
}
.tx-powermail .mandatory { color: #82ba50; margin-left: 0.15em; }

.tx-powermail .powermail_input,
.tx-powermail .powermail_textarea,
.tx-powermail .powermail_select {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: #222;
  background: #fff;
  border: 1px solid #d4d8d0;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tx-powermail .powermail_textarea { min-height: 10rem; resize: vertical; }

.tx-powermail .powermail_input:hover,
.tx-powermail .powermail_textarea:hover { border-color: #b5bdae; }

.tx-powermail .powermail_input:focus,
.tx-powermail .powermail_textarea:focus,
.tx-powermail .powermail_select:focus {
  outline: none;
  border-color: #82ba50;
  box-shadow: 0 0 0 3px rgba(130, 186, 80, 0.25);
}

/* Validation (powermail adds these classes / messages) */
.tx-powermail .powermail_field_error,
.tx-powermail .powermail_input.error,
.tx-powermail .powermail_textarea.error { border-color: #c0392b; }
.tx-powermail .powermail_field_error:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2); }
.tx-powermail .powermail_message,
.tx-powermail .powermail-errors-list,
.tx-powermail .parsley-errors-list {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: #c0392b;
}

.tx-powermail .powermail_fieldwrap_type_submit .powermail_field { display: flex; justify-content: flex-end; }
.tx-powermail input[type="submit"] {
  width: auto;
  min-width: 12rem;
  margin: 0.25rem 0 0;
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: #82ba50;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.tx-powermail input[type="submit"]:hover { background: #6e8d53; }
.tx-powermail input[type="submit"]:active { transform: translateY(1px); }
.tx-powermail input[type="submit"]:focus-visible { outline: 3px solid rgba(130, 186, 80, 0.45); outline-offset: 2px; }

@media screen and (max-width: 39.9375em) {
  .tx-powermail input[type="submit"] { width: 100%; }
}

/* Thank-you message after sending */
.tx-powermail .powermail_create {
  padding: 1.5rem 1.75rem;
  background: #f3f8ee;
  border-left: 4px solid #82ba50;
  border-radius: 8px;
}

/* ==========================================================================
   Team cards (grids with layout "Team", portrait above the text): same 4:3 format for every portrait,
   also for new uploads with other proportions. The crop itself is set per image
   (face-centred, see scripts/php/apply-team-crops.php) and can be changed in the backend.
   Only "image above text" – logos next to text (e.g. Mercato) keep their natural size.
   ========================================================================== */
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery,
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery .ce-outer,
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery .ce-inner,
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery .ce-row,
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery .ce-column,
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery figure {
  float: none;
  right: auto;
  width: 100%;
  margin: 0;
}
.frame-layout-4 .frame-type-textpic .ce-above .ce-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 35%;
}

/* ==========================================================================
   Cookie consent (CookieConsent v3) – colours of the site
   ========================================================================== */
#cc-main {
  --cc-font-family: 'PT Sans', Arial, sans-serif;
  /* "Alle ablehnen" (and primary buttons in the settings): site green */
  --cc-btn-primary-bg: #82ba50;
  --cc-btn-primary-border-color: #82ba50;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-hover-bg: #6e9d43;
  --cc-btn-primary-hover-border-color: #6e9d43;
  /* "Einstellungen": light */
  --cc-btn-secondary-bg: #eef3e9;
  --cc-btn-secondary-color: #2f3a27;
  --cc-btn-secondary-border-color: #eef3e9;
  --cc-btn-secondary-hover-bg: #dfe9d4;
  --cc-btn-secondary-hover-color: #2f3a27;
  --cc-btn-secondary-hover-border-color: #dfe9d4;
  --cc-toggle-on-bg: #82ba50;
  --cc-link-color: #568032;
}
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: 700; }
/* "Alle akzeptieren": a slightly darker green – same size and shape as "Alle ablehnen" */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  background: #5f9a34;
  border-color: #5f9a34;
}
#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  background: #4f8329;
  border-color: #4f8329;
}

/* Placeholder for Google Maps / YouTube until consent is given */
.cc-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 250px;
  padding: 2rem 1.5rem;
  text-align: center;
  background: #f3f5f1;
  border: 1px solid #e1e6dc;
}
.cc-embed-placeholder p { max-width: 36rem; margin: 0; }
.cc-embed-placeholder .cc-embed-title { font-size: 1.25rem; font-weight: 700; color: #3a3a3a; }
.cc-embed-button {
  padding: 0.8rem 1.8rem;
  font-weight: 700;
  color: #fff;
  background: #82ba50;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.cc-embed-button:hover { background: #6e8d53; }
.cc-embed-link {
  padding: 0;
  color: #568032;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Footer link to reopen the cookie settings */
.cc-settings-link { color: #82ba50; cursor: pointer; }