/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/blocksy-child/fonts/montserrat-v30-latin-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/blocksy-child/fonts/montserrat-v30-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/blocksy-child/fonts/montserrat-v30-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/blocksy-child/fonts/montserrat-v30-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Globale Schrift auf Montserrat umstellen */
html, body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Überschriften */
h1, h2 {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 500;
}

/* Überschriften */
h3, h4, h5, h6 {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
}

/* Navigation, Buttons, Formulare – optional, falls sie separat gestylt sind */
.ct-header, nav, .menu, .ct-menu-link,
button, .button, input[type="submit"],
input, select, textarea {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Formular schmal + zentriert */
#wpforms-774 {
  max-width: 600px;
  margin: 1rem auto;
  box-sizing: border-box;
}

/* Abstand zum Rand auf mobilen Geräten */
@media (max-width: 768px) {
  #wpforms-774 {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* Hintergrundfarbe der WPForms-Bestätigung anpassen */
.wpforms-confirmation-container-full {
    background-color: #779393 !important; /* deine Wunschfarbe */
    color: #ffffff !important;            /* weiße Schrift für guten Kontrast */
    border: none !important;              /* optional: Rahmen entfernen */
    border-radius: 6px;                   /* optional: abgerundete Ecken */
    padding: 15px;                        /* optional: etwas Abstand innen */
}

/* nur mobil / tablet – bei Bedarf 900px anpassen */
@media (max-width: 900px) {

  /* Bild direkt als CSS-Background auf der Spalte sitzt */
  .wp-block-stackable-column.hero-figure {
	overflow: visible !important;
    background-position: right -40px bottom !important;
    background-size: 64% !important;
    background-repeat: no-repeat !important;
  }
}

/* Desktop: force the timeline line & dots to the left, like on mobile */
@media (min-width: 1025px) {

  /* put the line near the left edge */
  .stk-block-timeline--right .stk-block-timeline__middle {
    right: auto !important;
    left: 3rem !important;            /* << move line further left/right as needed */
    transform: none !important;
  }

  /* make sure the dots sit exactly on the line */
  .stk-block-timeline--right .stk-block-timeline__middle:before,
  .stk-block-timeline--right .stk-block-timeline__middle:after {
    right: auto !important;
    left: 0 !important;
    transform: none !important;
  }

  /* add space so text doesn't overlap the line/dots */
  .stk-block-timeline--right .stk-block-timeline__date,
  .stk-block-timeline--right .stk-block-timeline__content {
    padding-left: 5.5rem !important;  /* matches the 3rem line position + breathing room */
  }
}