/*
 * Projekt-spezifische Anpassungen (ergaenzt die Original-Assets):
 *  - Hero-Bild als schmales Band oben (ca. 1/3 statt Vollbild)
 *  - Leistungen als schicke, immer sichtbare Karten (kein Akkordeon)
 */

/* -------------------------------------------------------------------------- */
/* Hero-Band (statt Vollbild) – gilt fuer ALLE Seiten                         */
/*                                                                            */
/* WICHTIG: Das Original (custom.js) versteckt das <img> und setzt das Bild   */
/* als CSS-Hintergrund auf .fullsize. Wir duerfen das <img> daher NICHT       */
/* wieder einblenden (sonst erscheint das Bild doppelt). Hier wird nur die    */
/* Bandhoehe von 100vh auf ca. 1/3 begrenzt und der Bildausschnitt justiert.  */
/* -------------------------------------------------------------------------- */
.fullsize,
.unterseite .fullsize {
  /*height: 50vh;*/
  min-height: 240px;
  max-height: 460px;
  overflow: hidden;
  margin-top: 99px;
}

/* Hinweis: Es gibt hier bewusst KEINE Regel, die .image-embed-item wieder    */
/* sichtbar macht. custom.js blendet das <img> aus (display:none) und zeigt   */
/* das Bild als Hintergrund – so bleibt es bei genau EINEM Bild.              */

@media (max-width: 767.98px) {
  .fullsize,
  .unterseite .fullsize {
    height: 26vh !important;
    min-height: 180px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Leistungen – Karten-Layout (alles sichtbar, kein Akkordeon)               */
/* -------------------------------------------------------------------------- */
.leistungen-grid {
  margin-top: 10px;
}

.leistung-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: 26px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.leistung-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.leistung-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 3px solid #8fae44;
}

.leistung-card__head img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.leistung-card__head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #231f20;
  line-height: 1.2;
}

.leistung-card ul {
  margin: 0;
  padding-left: 20px;
}

.leistung-card ul li {
  margin-bottom: 8px;
  color: #58595b;
  line-height: 1.55;
}

.leistung-card p {
  color: #58595b;
  line-height: 1.6;
}

#kontakt-wrapper {
  width: 500px;
  margin: 0 auto;
}

.form-field {
  margin: 15px 0;
}

input[type=text], input[type=tel], input[type=email], textarea {
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 100%;
}

input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus {
  border-color: #b8e4fc;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(62, 181, 247, 0.25);
}

/* Force the Grav captcha reload SVG to be visible and scaled */
.reload-captcha-button svg {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  vertical-align: middle;
  fill: currentColor; /* Inherits the text color of the button */
}

/* Ensure the parent button handles the alignment */
.reload-captcha-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}

/* Hide labels on the frontend without breaking form configuration metadata */
.form-field.no-label label {
    display: none !important;
}