/*
Theme Name:  Vereinsberatung
Theme URI:  https://visualtech.de
Description:  Theme für die Website von Vereinsberatung
Author:  Visualtech GmbH
Author URI:  https://visualtech.de
Template:  vj-basis
Version:  1.5.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
Text Domain:  vereinsberatung
*/

#kontakt-form span.wpcf7-form-control-wrap[data-name='kontakt-submit-before-after'] {
  display: none;
}

/* Variables */

:root {
  
  /* Fonts */
  --heading-font: "Lexend", sans-serif;
  --text-font: "Lexend", sans-serif;
  --main-menu-font: var(--heading-font);
  
  /* Colors */

  --primary-color-hex: #15616D; /* Vereinsberatung Petrol */
  --primary-color-rgb: 21,97,109;

  --secondary-color-hex: #001524; /* Vereinsberatung Dunkelblau */
  --secondary-color-rgb: 0,21,36;

  --tertiary-color-hex: #DEAA4B;
  --tertiary-color-rgb: 222,170,75;

  --quarternary-color-hex: #FFECD1;
  --quarternary-color-rgb: 225,236,209;
	
	--dark-gray: #333;
	
	--scrollbar-thumb-background: rgba(127,127,127,.5);
	--scrollbar-track-background: transparent;
	
	--background-gradient-horizontal: linear-gradient(to right, var(--primary-color-hex), var(--primary-color-hex));
  --background-gradient-vertical: linear-gradient(to bottom, var(--primary-color-hex), var(--secondary-color-hex));
  
   --text-color: var(--secondary-color-hex); 
  
  --text-color-light: #666;
  
  --body-background: #fff;
	
	/* Headings */
	--heading-margin: .7em 0;
  --heading-text-align: left;
	
	--heading-color: var(--color);
	--heading-font-weight: 500;
	--h1-font-size: 3rem;
/* 	--h1-color: inherit; */
	
	--h2-font-size: 2rem;
/* 	--h2-color: inherit; */
	
	--h3-font-size: 1.2rem;
/* 	--h3-color: inherit; */
	
	/* Buttons */
  
  --button-background: var(--tertiary-color-hex);
  --button-background-hover: var(--secondary-color-hex);
  /* Dunkle Schrift auf Gold: Weiß hatte 2,11 : 1, Dunkelblau hat 8,8 : 1 (WCAG 1.4.3, freigegeben
     27.10.2026). Beim Darüberfahren Dunkelblau mit weißer Schrift wie bisher. */
  --button-color: var(--secondary-color-hex);
  --button-color-hover: #fff;
  --button-padding: .9em 1.65em;
  --button-font-weight: 500;

/* 	--button-padding: .8em 1.35em;
  
	--button-border-width: 2px;
	--button-border-style: solid;
	--button-border-color: var(--primary-color-hex);
	--button-font-family: var(--heading-font);
	--button-font-size: .8rem;
	
	--button-text-transform: uppercase;
	--button-letter-spacing: .25rem;
  --button-color: var(--primary-color-hex); 
	
  --button-background-hover: #fff;
	--button-border-color-hover: var(--secondary-color-hex);
	--button-color-hover: var(--secondary-color-hex);
  */
	
	/* Links */
	--link-color: var(--primary-color-hex);
	--link-hover-color: var(--secondary-color-hex);
/* 	--link-text-decoration: none; */
	--link-text-underline-offset: .2em;
	--link-text-decoration-color: var(--link-color);
	
	/* Icons */
	--above-footer-icon-color: var(--primary-color-hex);
	
	/* Header */
  --header-shadow: 0 3px 24px rgb(0 0 0 / 16%);
  
  --main-menu-height: 85px;
  --main-menu-background-color: #fff;
  --main-menu-color: var(--text-color);
  --main-menu-hover-color: inherit;

  --logo-width: 200px;
	
	/* Category */
	--category-max-width: 1000px;
	
	/* Footer */
  --footer-background-color: var(--secondary-color-hex);
	--footer-color: #fff9;
	--footer-link-hover-color: #fff;
  
	/* Miscellaneous specs */
  --100vh: 100vh;
  --mobile-vh: 100vh;
	
	--scrollbar-width: 8px; /* Webkit only */
	
  --content-max-width: 1000px;
	
  font-family: var(--text-font);
  font-weight: 300;
  font-size: 17px;
	line-height: 1.2;
  color: var(--text-color);
}

strong {
  font-weight: 500;
}


/* Inputs */

.kontakt-input, .kontakt-textarea {
  font-weight: 300;
}

/* Heading */

#kontakt-headline, #kontakt-author-name, .kontakt-submit {
  font-weight: var(--heading-font-weight);
}


/* Buttons */

.button {
  border-radius: 3px;
}
  

.button.secondary {
  color: var(--secondary-color-hex);
  border-color: var(--secondary-color-hex);
}

.button.reverse {
  background-color: var(--primary-color-hex);
  color: #fff;
}

.above-buttons > .button {
  background-color: transparent;
  border-width: 1.5px;
  border-color: #fff;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
}

.above-slide.white .above-buttons > .button:hover {
  background-color: rgba(255,255,255,0.1);
}

.above-slide.black .above-buttons > .button:hover {
  background-color: rgba(0,0,0,0.1);
}

.above-slide.primary .above-buttons > .button:hover {
  background-color: rgba(var(--primary-color-rgb),0.1);
}

.above-slide.secondary .above-buttons > .button:hover {
  background-color: rgba(var(--secondary-color-rgb),0.1);
}

.above-slide.tertiary .above-buttons > .button:hover {
  background-color: rgba(var(--tertiary-color-rgb),0.1);
}

/* Menu */

nav#header-main-menu ul a {
  color: var(--secondary-color-hex);
}

nav#header-main-menu ul.sub-menu {
/*   border-radius: 10px; */
/*   transform: translate(0, -10px); */
/*   overflow: hidden; */
}

nav#header-main-menu > ul.menu > li.menu-item {
  height: 70%;
}

nav#header-main-menu > ul.menu > li.menu-item > ul.sub-menu {
/*   margin-top: -10px; */
}




/* Logo */

#logo {
  background-image: url("assets/images/vereinsberatung.svg");
}

.header-link {
  font-size: 0.95rem;
}

.header-link-text {
  color: var(--primary-color-hex);
}

.header-link:hover > .header-link-text {
  color: var(--tertiary-color-hex);
}

.header-link > svg {
  color: var(--tertiary-color-hex);
  transition: all 0.3s ease-out;
}


#landingpage .header-link:hover > .header-link-text,
#landingpage .header-link:hover > svg {
  color: var(--tertiary-color-hex);
}




nav#header-main-menu ul a {
    color: var(--primary-color-hex);
}

nav#header-main-menu li.menu-item > a:hover {
    color: var(--tertiary-color-hex);
}

#landingpage nav#header-main-menu ul a {
  color: #fff;
}

#landingpage nav#header-main-menu li.menu-item > a:hover {
  color: var(--tertiary-color-hex);
}






/* Section */

section > h1 {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 0; 
}

section > h2 {
/*   margin: 0 0 40px; */
/*   text-transform: uppercase; */
  font-size: 2.2rem;
  font-weight: 600;
/*   letter-spacing: 0.3rem; */
  text-align: center;
/*   color: var(--primary-color-hex); */
}


section > h3,
section > .h3-stil {
/*   margin: 0 0 40px; */
/*   text-transform: uppercase; */
  font-size: 1.3rem;
  font-weight: 600;
/*   letter-spacing: 0.3rem; */
  text-align: center;
  color: var(--primary-color-hex);
}


#above {
  height: 100vh;
}


#above-slide-controls.white {
  border-radius: 3px;
  padding: 12px 20px;
  background: transparent;
}

#above-slide-controls > * {
  opacity: 0.5;
}

#above-slide-controls:hover > * {
	opacity: 0.75;
}

.above-slide-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  
}



/* Page */

#page-breadcrumbs > a {
    color: var(--primary-color-hex);
}

#page-breadcrumbs > a:hover {
    color: var(--tertiary-color-hex);
}



#page-feature {
  border-radius: 15px;
  overflow: hidden;
  background-color: var(--quarternary-color-hex);
}




/* Contact */

#kontakt {
  background-color: var(--primary-color-hex);
  background-image: none;
  box-shadow: none;
  height: calc(100vh - var(--main-menu-height));
  position: relative;
}

#kontakt-author {
  height: calc(100vh - var(--main-menu-height));
  position: static;
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: var(--tertiary-color-hex);
}

#kontakt-author-image {
  height: 100%;
  overflow: hidden;
  background-color: #999;
  position: static;
}

#kontakt-author-image > img,
#kontakt-author-image > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

#kontakt-author-info {
  padding: 40px 120px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
	position: static;
/*   border-radius: 0 0 10px 10px; */
  font-size: 0.9rem;
	color: inherit;
  text-shadow: none;
}

#kontakt-author-name {
  font-size: 1.2rem;
  margin: 0;
}

#kontakt-author-function {
	margin-top: 0;
  margin-bottom: 7px;
  font-size: inherit;
}

a.kontakt-author-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--secondary-color-hex);
}

a.kontakt-author-detail:hover {
  color: var(--primary-color-hex);
}

a.kontakt-author-detail > svg {
  margin-right: 10px;
  color: var(--tertiary-color-hex);
}

a.kontakt-author-detail > span {
/*   color: var(--text-color); */
}

#kontakt-form {
  height: 100%;
	display: block;
  padding: 50px calc(50vw - 500px + 20px) 50px 50px;
  background-color: var(--primary-color-hex);
}

#kontakt-headline {
  margin-bottom: 15px;
}

#kontakt-description {
	margin-top: 0;
  margin-bottom: 20px;
}

.kontakt-input,
.kontakt-textarea,
.kontakt-submit {
  border-radius: 3px;
  background-color: #fff;
}

.kontakt-submit {
  display: block;
  text-align: center;
  transition: all 0.3s ease-out;
}

.kontakt-submit:hover {
  background-color: var(--secondary-color-hex);
  color: #fff;
}

.kontakt-option-separator {
  margin-top: 10px; 
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
}

/* Landingpage */

#landingpage-header {
/*   background: linear-gradient(to left, var(--secondary-color-hex), var(--primary-color-hex)); */
  height: 60px;
  box-shadow: none;
}

#landingpage-content {

}

#landingpage-above {
  max-width: 100%;
  height: 100vh;
  padding-top: 60px;
  background: linear-gradient(to left, var(--secondary-color-hex), var(--primary-color-hex));
}

#landingpage header {
  box-shadow: none;
}

#landingpage #page {
  margin-top: 0;
}

#landingpage #page-above {
  height: 100vh;
}

#landingpage #page-thumbnail {
  width: auto;
  height: auto;
}





.schema-faq-question {
  font-weight: 400;
}


/* Mailpoet */

#post-content > .mailpoet_form {
  background-color: var(--quarternary-color-hex);
}

#post-content > .mailpoet_form .mailpoet-heading {
  font-weight: var(--heading-font-weight);
}

#post-content > .mailpoet_form .mailpoet_form_paragraph {
  font-weight: 300;
}

#post-content > .mailpoet_form .mailpoet_text {
  font-weight: 300;
}

#post-content > .mailpoet_form .mailpoet_submit {
  font-weight: var(--heading-font-weight);
}