/* 
Theme Name:		 VANADIS THEME
Theme URI:		 https://vanadis-pfade.de
Description:	 VANADIS Theme basiert auf GeneratePress
Author:			 Lichtsignale
Author URI:		 https://lichtsignale.de
Template:		 generatepress
Version:		 1.0
Text Domain:	 lichtsignale-theme
*/


:root {
  /* Basis-Schriftgröße (kann für verschiedene Geräte angepasst werden) */
  font-size: 100%; /* 16px Standard-Browsergröße */

  /* Dynamische Schriftgrößen für verschiedene Elemente */
  --font-h1: clamp(2rem, 4vw, 3rem); /* Min 32px, flexibel bis 48px */
  --font-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-h3: clamp(1.5rem, 3vw, 2rem);
  --font-h4: clamp(1.25rem, 2.5vw, 1.75rem);
  --font-h5: clamp(1.125rem, 2vw, 1.5rem);
  --font-h6: clamp(1rem, 1.8vw, 1.25rem);
  --font-body: clamp(1rem, 1.6vw, 1.25rem);
  --font-ui: clamp(1rem, 1.5vw, 1.25rem);
}

body, html{
	overflow-x:hidden;
}

body,button, input, select, textarea {
  font-size: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}

h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }
h4 { font-size: var(--font-h4); }
h5 { font-size: var(--font-h5); }
h6 { font-size: var(--font-h6); }



/* Navigation */

.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled{
	background-color: transparent;
}

.gp-icon svg{
	width: 1.25em;
	height: 1.25em;
}

@media(max-width:1024px){
	.main-navigation .main-nav ul li a{
		padding-left:0;
		padding-right:0;
	}
}

@media(min-width:1025px){
	
	.main-navigation ul li {
		margin: 0 24px; /* Abstand zwischen den Navigationselementen */
	}
	
	.main-navigation ul li a {
		position: relative;
		display: inline-block;
		padding: 12px 0 1px 0 !important;
		line-height: 1.3 !important;
	}
	
	.main-navigation ul li a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0; /* Falls der Strich höher sitzen soll, ändere diesen Wert */
		width: 0;
		height: 2px; /* Dicke der Linie */
		background-color: var(--purple); /* Farbe des Unterstrichs */
		transition: width 0.3s ease-in-out;
	}
	
	/* Unterstrich beim Hover */
	.main-navigation ul li a:hover::after {
		width: 100%;
	}
	
	/* Unterstrich für das aktive Menüelement */
	.main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
		width: 100%;
	}
	
	.main-navigation .main-nav ul > li:last-child{
		margin-right: 12px;
	}

}

@media (max-width: 1200px) and (min-width: 1025px){
  .main-navigation ul li {
    margin: 0 12px; /* Reduziert den Abstand zwischen den LI-Elementen auf 16px (8px pro Seite) */
  }

  .main-navigation ul li a {
    font-size: 97%; /* Verkleinert die Schrift um 10% */
  }
}


/* Kopfbereich */

.unterseite-hero{
	max-width: calc(100vw - 48px) !important;
    border-radius: 24px;
	margin-bottom: 2em;
}

.unterseite-hero .inside-page-hero{
	position:relative;
	height: 100%;
}

.seitentitel-hero{
	position:absolute;
	left: 24px;
	bottom: -10px;
}

.seitentitel-hero h1{
	margin-bottom:0;
	line-height:1;
}

@media(min-width:1700px){
	.unterseite-hero{
		height: 687px
	}
}

@media(min-width:1025px){
	.unterseite-hero{
		height: calc(43vw - 48px);
	}
}


@media(max-width:1024px){
	.unterseite-hero{
		height: 393px;
		padding-bottom: 24px;
	}
	.seitentitel-hero{
		left:0;
	}
}


/* Inhalt */

.home.one-container .site-content{
	padding-top:0;
}

.home .post-image:not(:first-child),
.home .page-content:not(:first-child),
.home .entry-content:not(:first-child),
.home .entry-summary:not(:first-child), footer.entry-meta{
	margin-top: 0;
}

.upfaden{
  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.post-image img,
.featured-image img,
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background){
	border-radius: 24px;
}

.blog .post-image-above-header .inside-article div.featured-image,
.blog .post-image-above-header .inside-article div.post-image{
	margin-bottom: 4em;
}

ul.wp-block-list{
	margin: 0 0 1.5em 1.3em;
}

ol.wp-block-list{
	margin: 0 0 1.5em 1.5em;
}

ol.wp-block-list li{
	padding-left:8px;
	margin-bottom: 1em;
}

ol.wp-block-list li::marker{
	font-weight: bold;
}

/* Fusszeile */

a.generate-back-to-top{
	border-radius: 50%;
}