/**
Theme Name: Template-Theme
Author: Anne Schwarz | Bloghexe
Author URI: https://bloghexe.de
Description: Template-Theme, basierend auf Astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: templatetheme
Template: astra
*/

/* ============================================
   GENERELLES
   ============================================ */

html, body {
  overflow-x: hidden;
}


@media (min-width: 1025px) {
  .max-width-500 {
  	max-width: 500px !important;
  }
}


/* Standard-WordPress-Seiten ohne Elementor */
.ast-container {
  padding: 0;
}

.entry-content,
.entry-header,
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.entry-header{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.entry-title {
  font-size: var(--e-global-typography-primary-font-size, 2.4rem) !important;
  hyphens: auto;
}

@media (max-width: 768px) {
  .entry-content,
  .entry-header,
  .page-content {
    padding: 1rem;
  }
}

/* ============================================
   LAYOUT 
   Jeder Bereich trägt die Klasse .section und steht auf fullwidth.
   Darin liegt entweder ein .wrapper auf boxed,
      oder .col-left und .col-right, die jeweils ein .content enthalten.
   ============================================ */

.section {
  width: 100%;
  padding: 0 !important;
}

/* Innerer Container bei Full-Width-Sektionen */
.wrapper,
.content {
  padding: 4rem !important;
}


@media (max-width: 1024px) {
  .wrapper,
  .content {
    padding: 3rem 2rem !important;
  }
}

@media (max-width: 768px) {
  .wrapper,
  .content {
    padding: 2rem 1rem !important;
  }
}


/* ============================================
   LAYOUT – SPALTEN
   ============================================ */

.col-left,
.col-right {
  width: 50% !important;
}

@media (max-width: 1024px) {
  .col-left,
  .col-right {
    width: 100% !important;
  }
}

/* Text auf max. Breite begrenzen bei 50/50-Layouts */
@media (min-width: 1025px) {
  
	.col-left.col-text .content {
  		max-width: 600px;
  		margin-left: auto;
  		padding-left: 0 !important;
	}

	.col-right.col-text .content {
  		max-width: 600px;
  		margin-right: auto;
  		padding-right: 0 !important;
	}
}

.col-media {
	padding: 0 !important;
}



/* ============================================
   LAYOUT – GRID
   ============================================ */

.grid-2,
.grid-3,
.grid-4 {
  display: grid !important;
  gap: 1.5rem !important;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TYPOGRAFIE
   Schriftgrößen werden hier gesetzt, damit Elementor free und Astra free sauber zusammenspielen
   ============================================ */
   
.elementor-kit-7 h1,
.entry-content h1 { 
	font-size: 2.2rem !important; 
}

.elementor-kit-7 h2,
.entry-content h2 { 
	font-size: 2rem !important; 
}

.elementor-kit-7 h3,
.entry-content h3 { 
	font-size: 1.8rem !important; 
}

.elementor-kit-7 h4,
.entry-content h4 { 
	font-size: 1.6rem !important; 
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Transparenter Header nur auf Startseite und "Über" */
/*
body:not(.home):not(.page-id-12).ast-theme-transparent-header #masthead {
  position: relative !important;
  left: auto !important;
  right: auto !important;
}

body:not(.home):not(.page-id-12).ast-theme-transparent-header .main-header-bar {
  background-color: #F5F1EB !important;
  position: relative !important;
}

body:not(.home).ast-theme-transparent-header .main-header-menu .menu-link {
  color: #1c2c4c !important;
}

body:not(.home).ast-theme-transparent-header .main-header-menu .menu-link:hover,
body:not(.home).ast-theme-transparent-header .main-header-menu .current-menu-item .menu-link {
  color: #F16C61 !important;
}

.hero {
  padding-top: 115px !important;
}
  
@media (max-width: 1024px) {
  .hero {
    padding-top: 115px !important;
  }
}
*/

/* Schriftart Navigation */
.ast-nav-menu a {
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
}

/* Trennlinie Header entfernen */
.ast-primary-header-bar {
  border: 0;
}

.ast-header-button-1 .ast-custom-button {
  border-radius: 3px !important;
}

/* bei transparentem Header mit eigentlich hellem Foto, das rechts aber dunkel ist */
/*body.page-id-12.ast-theme-transparent-header .main-header-menu .menu-link {
  text-shadow: 0 1px 4px rgba(255,255,255,0.8);
}*/


/* ============================================
   BUTTONS
   ============================================ */

.ast-custom-button-link {
  text-decoration: none !important;
}

input[type="submit"],
.ast-custom-button {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff !important;
  transition: background-color 0.2s ease;
}

.ast-custom-button:hover {
  background: var(--ast-global-color-1) !important;
}

#ast-desktop-header .ast-custom-button {
  max-width: 230px;
  display: flex;
  text-align: center;
  line-height: 1.4;
}

/* ============================================
   ICON-BOXEN
   ============================================ */

/* Buttons auf gleicher Höhe */
.iconbox-gleich .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.iconbox-gleich .elementor-icon-box-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.iconbox-gleich .elementor-icon-box-description {
  flex: 1;
}

.elementor-icon-box-icon {
	text-align: center;
}

/* Typografie Icon-Boxen */
h3.elementor-icon-box-title {
  font-size: 1.7rem;
  letter-spacing: 0;
  line-height: 1.7rem;
  margin-bottom: 1.5rem;
}

.elementor-icon-box-content .elementor-widget-button {
  margin-top: 30px;
}

.elementor-icon-box-content .elementor-widget-button a {
  min-height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media (max-width: 1024px) {
  h3.elementor-icon-box-title {
    font-size: 1.3rem;
  }
  
   .iconbox-gleich:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
  
  .elementor-icon-box-content .elementor-button {
   hyphens: auto;
   -webkit-hyphens: auto;
   word-break: break-word;
   overflow-wrap: break-word;
 }
}



/* ============================================
   KONTAKTFORMULAR IM FOOTER
   ============================================ */

.custom-elementor-footer .wpcf7-response-output {
  color: #fff !important;
}

.wpcf7 .wpcf7-not-valid-tip {
  color: #F16C61;
}

.wpcf7 label {
  color: var(--ast-global-color-5);
}

.wpcf7 input,
.wpcf7 textarea {
  color: var(--ast-global-color-2);
}

@media (max-width: 1024px) {
	.wpcf7 input.wpcf7-submit {
		width: 100%;
	}
}
/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  border-top: 1px solid var(--ast-global-color-5);
  padding: 2rem 1rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: #F16C61 !important;
}

.custom-elementor-footer ul.elementor-icon-list-items {
  margin: 0;
}

.custom-elementor-footer .elementor-icon-list-icon svg {
  width: 1em !important;
  height: 1em !important;
}

.custom-elementor-footer label {
  color: var(--ast-global-color-5);
}