/* ---------- Design-Tokens (Desktop) ---------- */
:root {
  /* Layout */
  --container-max: 1920px;
  --section-pad-x: clamp(72px, 15.6vw, 299px);
  --section-bg: #f2faf5;
  --section-pad-y: 45px;
  @media (max-width: 1550px) {
    --section-pad-x: clamp(72px, 7.1vw, 110px);
  }
  @media (max-width: 767px) {
    --section-pad-y: 30px;
  }

  /* Header */
  /*--header-h: 183px;*/
  --header-bg: #ffffff;

  /* Farben */
  --color-ink: #3c3c3b;
  --color-green: #005634;
  --color-neon: #00ee68;
  --color-white: #ffffff;
  --color-btn-bg: #fbe122;
  --color-btn-text: #000000;

  /* Buttons */
  --btn-font-size: 18px;
  --btn-line-height: 23px;
  --btn-font-weight: 700;
  /* 23px Zeilenhöhe + 2×4px Padding = ~31px Gesamthöhe (wie im Screenshot) */
  --btn-pad-y: 19px;
  --btn-pad-x: 31px;
  --btn-radius: 9999px;

  /* Listen */
  --list-bullet-size: 25px;
  --list-bullet-gap: 14px;

  /* Typo (Desktop) */
  --h1-size: 90px;
  --h1-line: 100px;
  --h1-weight: 700;

  --h2-size: 60px;
  --h2-line: 79px;
  --h2-weight: 700;

  --h3-size: 35px;
  --h3-line: 47px;
  --h3-weight: 700;

  --h4-size: 26px;
  --h4-line: 33px;
  --h4-weight: 700;

  --h5-size: 20px;
  --h5-line: 26px;
  --h5-weight: 700;

  --body-size: 20px;
  --body-line: 29px;
  --body-weight: 400;
}

/* ---------- Globale Layout-Container ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}
/* Begrenzt den gesamten Seiteninhalt auf 1920px und zentriert ihn */
.wp-site-blocks {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Standard-Section: seitlicher Innenabstand + Standard-Hintergrund */
.section,
.wp-block-group.section {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
  background: var(--section-bg);
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  margin: 0;
}
.section:first-of-type,
.wp-block-group.section:first-of-type {
  padding-top: 0;
}
.section:last-of-type,
.wp-block-group.section:last-of-type {
  padding-bottom: 100px;
}
@media (min-width: 1080px) {
  .section.padding-right-38-vw,
  .wp-block-group.section.padding-right-38-vw {
    padding-right: 38vw;
  }
}

/* Hero & Full-Width Sektionen: keine seitlichen Abstände, kein Zwangs-Background */
.hero-section,
.wp-block-group.hero-section,
.full-width-section,
.wp-block-group.full-width-section {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  max-width: 1920px;
}

/* ---------- Header ---------- */

/* Einfach und robust für Block-Themes */
header,
.site-header,
.wp-block-template-part[aria-label="Header"] {
  min-height: var(--header-h);
  background: var(--header-bg);
}

.sticky-part {
  background: var(--header-bg);
}

header,
.sticky-part {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}
/* ---------- Buttons (auch WordPress-Buttons) ---------- */

.btn,
.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Platz für Pfeil/Icons rechts */
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  line-height: var(--btn-line-height);
  font-weight: var(--btn-font-weight);
  color: var(--color-btn-text);
  background: var(--color-btn-bg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease,
    filter 0.15s ease;
  width: fit-content;
}

/* Hover/Focus – leichtes Liften wie im Design üblich */
.btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  background: var(--color-green);
}

.btn:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* Optionaler Pfeil rechts (falls kein Icon blockseitig gesetzt wird) */
.btn.has-arrow::after,
.wp-element-button.has-arrow::after,
.wp-block-button__link.has-arrow::after {
  content: "";
  margin-left: 40px;
  width: 18px;
  height: 14px;
  display: inline-block;
  -webkit-mask: url("/wp-content/uploads/2025/09/pfeil.png") no-repeat center /
    cover;
  mask: url("/wp-content/uploads/2025/09/pfeil.png") no-repeat center / cover;
  background-color: currentColor;
  transition: transform 0.4s ease-in-out;
}
.btn.has-arrow:hover::after,
.wp-element-button.has-arrow:hover::after,
.wp-block-button__link.has-arrow:hover::after {
  transform: translateX(7px);
}

/* ---------- Listen (li.list-standard) ---------- */

ul.list-standard {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list-standard > li {
  position: relative;
  color: var(--color-ink);
  padding-left: calc(var(--list-bullet-size) + var(--list-bullet-gap));
  font-size: var(--body-size);
  line-height: var(--body-line);
}

ul.list-standard > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  background: var(--color-green);
  border-radius: 50%;
  transform: translateY(-50%);
}
ul.wp-block-list {
  padding-left: var(--list-bullet-size);
}
ul.wp-block-list li::marker {
  color: var(--color-green);
  font-size: var(--list-bullet-size);
}
/* ---------- Typografie ---------- */

body {
  color: var(--color-ink);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
}

/* H1 Standard: weiß, fette Display-Typo */
h1,
.wp-block-post-title.is-style-h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
  color: var(--color-white);
  margin: 0 0 0.5em;
}

/* H1 Variante: neon-grün */
h1 .color-extra,
.color-extra {
  color: var(--color-neon);
}

/* H2 */
h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
  color: var(--color-ink);
  margin: 0 0 0.6em;
}

/* H3 */
h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-weight);
  color: var(--color-ink);
  margin: 0 0 0.6em;
}

/* H4 */
h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  font-weight: var(--h4-weight);
  color: var(--color-ink);
  margin: 0 0 0.6em;
}

/* H5 */
h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-line);
  font-weight: var(--h5-weight);  
  margin: 0 0 0.6em;
}

/* Standard-Absätze */
p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
  color: var(--color-ink);
  margin: 0;
}
time {
  font-size: var(--body-size);
  line-height: 23px;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 29px;
  display: inline-block;
}


@media (max-width: 1150px) {
  :root {
    --container-max: 100%;
    --section-pad-x: 72px; 
    --section-bg: #f2faf5;
    
    --header-h: 140px; 
    
    --btn-font-size: 16px;
    --btn-line-height: 22px;
    --btn-pad-y: 19px;
    --btn-pad-x: 31px;
   
    --list-bullet-size: 20px;
    --list-bullet-gap: 12px;

    --h1-size: 56px;
    --h1-line: 64px;
    --h2-size: 40px;
    --h2-line: 52px;
    --h3-size: 28px;
    --h3-line: 38px;
    --body-size: 18px;
    --body-line: 27px;
  }

  /* WP-Query Grids (3→2 Spalten) – falls genutzt */
  .wp-block-query .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   Smartphone – View
   (bis 640px Breite)
   ========================= */
@media (max-width: 640px) {
  :root {
    /* Layout */
    --container-max: 100%;
    --section-pad-x: 20px; /* komfortabler Rand auf Phones */

    /* Header */
    --header-h: 96px;

    /* Buttons – Touch-optimiert (min. 44px Höhe) */
    --btn-font-size: 16px;
    --btn-line-height: 22px;
    --btn-pad-y: 11px; /* 22px + 2×11px ≈ 44px Gesamthöhe */
    --btn-pad-x: 18px;

    /* Listen */
    --list-bullet-size: 8px;
    --list-bullet-gap: 12px;

    /* Typo */
    --h1-size: 38px;
    --h1-line: 44px;

    --h2-size: 28px;
    --h2-line: 36px;

    --h3-size: 22px;
    --h3-line: 30px;

    --body-size: 16px;
    --body-line: 24px;
  }

  /* Buttons optional vollbreit, wenn du die Klasse vergibst */
  .btn--block,
  .wp-block-button.is-style-fill.btn--block .wp-block-button__link {
    width: 100%;
  }

  /* WP-Query Grids (2→1 Spalte) – falls genutzt */
  .wp-block-query .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/*Footer*/
footer > .wp-block-group {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
  min-height: 450px;
}
@media (max-width: 1023px) {
  footer {
	.wp-block-columns{
		gap: 0px;
		 .wp-block-column{
			flex-basis: auto !important;
/*
			&:first-of-type{
				figure.wp-block-image{
						background-image: url('/wp-content/uploads/2025/09/favicon.png');
						background-repeat: no-repeat;
						background-size: contain;
						width: 44px;
						height: 45px;

					img{
						display: none;
					}
				}
				
			}*/
		} 
	}
	
  }
}
@media (max-width: 781px) {
	footer {
		.wp-block-columns{
			flex-direction: column;
			gap: 40px;
		}
		.wp-block-list.footer-liste{
			display: flex;
			flex-direction: column;
			gap: 16px;

			&>li{
				&::after{
					display: none;
				}
			}
		}

		.footer-fixed-buttons{
			display: none !important;
		}
	}
}

/*Breadcrumbs*/
/* Breadcrumb chevron: color + smaller size */
.breadcrumbs {
  --crumb-sep-size: 12px; /* smaller than before */
  --crumb-sep-gap: 0.45rem;
  --crumb-sep-color: var(--color-green); /* your brand green */
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

/* chevron separator */
.breadcrumbs li + li::before {
  content: "";
  width: var(--crumb-sep-size);
  height: 2px;
  margin: 0 calc(var(--crumb-sep-gap) + 0.1rem) 0 var(--crumb-sep-gap);
  background-color: var(--crumb-sep-color); /* force green */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path d='M1.3 1.3L6 6l-4.7 4.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'><path d='M1.3 1.3L6 6l-4.7 4.7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat center / contain;
  opacity: 0.85;
}

/* (optional) underline links, but not the current page */
.breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 29px;
}
.breadcrumbs li:last-child a,
.breadcrumbs li:last-child span {
  text-decoration: none;
  pointer-events: none;
  color: var(--color-green);
  font-weight: 600;
  font-size: 16px;
  line-height: 29px;
}

/*Breakpoints*/
@media (min-width: 960px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation__responsive-container-content{
	  justify-content: end !important;
  }
  .wp-block-navigation__responsive-container {
    display: block !important;
  }
  .wp-block-navigation .wp-block-navigation-item {	
		margin-left: 1.2vw;
	}
	.wp-block-navigation__container {
		column-gap: 21px;
	}
}
@media (max-width: 959px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .wp-block-navigation__responsive-container {
    display: none !important;
  }
  nav.wp-block-navigation {
    display: flex;
    justify-content: end;
  }
  .wp-block-navigation__responsive-container-open{
	background-image: url('/wp-content/uploads/hamburger-icon.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 39px;
    height: 39px;  

	svg{
		display: none;
	}
  }
  .sticky-part{	
		
		li:hover{
			text-decoration-color: transparent !important;
		}
	}
}
@media (max-width: 550px) {

	header{
		display: none;
	}
	
	.sticky-part{	
		#top{
			padding-left: 0px;
			padding-right: 0px;

			.custom-logo-link {
				background-image: url('/wp-content/uploads/2025/09/favicon.png');
				background-repeat: no-repeat;
				background-size: contain;
				width: 44px;
				height: 45px;

				img{
					display: none;
				}
			}

			.wp-block-navigation-submenu{					
				flex-direction: column;            
            	flex-wrap: nowrap !important;    
			}        
		}		
	}
}
/************************************/
/* Offcanvas/Overlay-Menü*/

/* Container des mobilen Menüs */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;          
  z-index: 9999;
  display: flex !important;

  .wp-block-navigation__responsive-container-close{
	right: 40px;
  	top: 70px;
  }
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
  }
  .wp-block-navigation__responsive-container-content{
	padding-top: 110px !important;
	padding-left: 25px !important;
	padding-right: 25px !important;	
  

		&>ul.wp-block-navigation__container{
			width: 100% !important;
			align-items: start !important;
			padding: 0 10vw !important;			

			&>li.wp-block-navigation-item{
				align-items: start !important;
				align-self: flex-start;

				&::before{
					padding: 0px !important;
					text-align: start !important;
				}

				&.wp-block-navigation-submenu{
					max-width: 100% !important;

					&>.wp-block-navigation-submenu{
						position: relative !important;
						top: 0px !important;
						left: 0px !important;
						padding: 0 !important;
						display: flex !important;
				flex-direction: row;
            column-gap: 25px;
            flex-wrap: wrap !important;
            max-width: 100% !important;

						&>li.wp-block-navigation-item{
							&>a.wp-block-navigation-item__content{
								&>.wp-block-navigation-item__label{
									font-size: 18px !important;
									line-height: 29px !important;
								}							
							}

							&::after{
								display: none !important;
							}						
						}
					}
				}
			}
		}
  }
}