/*
 Theme Name:   Neve Child
 Theme URI:    https://deine-domain.de/neve-child
 Description:  Child Theme für Neve – eigene CSS & Anpassungen
 Author:       Name
 Author URI:   https://deine-domain.de
 Template:     neve
 Version:      1.0.0
*/

html {
  scroll-behavior: smooth;
}

/**** Font Überschrift ****/
h1, h2{
font-family: "schoolbook", serif!important;
font-weight: 400;
font-style: normal;
}

h3, h4, h5, h6, p, a, label, legend, input{
font-family: "klavika-web", sans-serif!important;
font-weight: 400;
font-style: normal;
}

strong, button, br, span, li{
font-family: "klavika-web", sans-serif!important;

}

p{
	font-size: 1.1rem;
font-family: "klavika-web-display", sans-serif;
font-weight: 100;
font-style: normal;
	line-height: 1.4;
}

.h2-large{
	font-size: 4.5rem;
}

.h2-middle{
	font-size: 3rem;
}

h3{
	font-size: 1.375rem;
	margin-bottom: 0;
}

.text-white{
	color: white;
}

.text-firus{
	color: #e5006d;
}

.hr-center{
	width: 120px;
}

.video-desktop{
	display: block;
}
.video-mobile{
	display: none;
}

div.plain-container{
	display: inline-block;
}

div.plain-container > div:first-child{
	position: absolute;
    z-index: 10;
	margin-top: 100px;
}

div.plain-container > div:nth-child(2){
	width: 82%;
    right: 0;
    float: right;
    position: relative;
}

div.gap{
	gap: 5%;
}

.text-container-width{
width: 75%;
}



/**** Über Uns Kontakte ****/
/** Kontakt  **/

/* 100 vh */
.vph{
	min-height: 100vh;
}




/* Startseite Leistungen */
.gaps {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}





/**** Typos ****/

/* Padding/Margin raus, heigt klein*/
.noMar-Pad{
	padding: 0;
	margin: 0;
	height: 40%;
}


/* h2 animation*/
h2 span {
  display: inline-block;
  transform: translateY(100%) scale(0.8) rotate(-180deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              opacity 0.6s ease;
}

h2.animate span {
  transform: translateY(0) scale(1) rotate(0deg);
  opacity: 1;
}

.blur-in {
  filter: blur(8px);
  opacity: 0;
  animation: blurIn 0.9s ease forwards;
}

@keyframes blurIn {
  to {
    filter: blur(0);
    opacity: 1;
  }
}



/**** Schatten Effekte****/
/* Neumorphism*/
.neumorph-rev{

  box-shadow: 4px 4px 8px #d1d1d1,
              -8px -8px 15px #ffffff;
  transition: background 0.3s, box-shadow 0.3s, border-radius 0.3s;
}

.neumorph-rev:hover{
	cursor: pointer;

  box-shadow: 12px 12px 24px #d1d1d1,
              -8px -8px 15px #ffffff;
}


.neumorph{
  background: #f0f0f3;
  border-radius: 16px;
  box-shadow: 8px 8px 15px #d1d1d1,
              -8px -8px 15px #ffffff;
}

/* floating material */
.floatMat {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 4px 6px rgba(0,0,0,0.08);
}

/* softBig */
.softBig {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	transition: background 0.3s, box-shadow 0.3s, border-radius 0.3s;
}

.softBig:hover {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 4px 6px rgba(0,0,0,0.08);
}

/* modern*/
.modern {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background 0.3s, box-shadow 0.3s, border-radius 0.3s;
}

.modern:hover {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}





/**** Grafik animationen ****/
/* wobble */
.wobble > svg {
  display: inline-block;
  transform-origin: center;
  animation: wobble 3s infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(5deg) scale(1.1); }
  50% { transform: rotate(-5deg) scale(0.9); }
  75% { transform: rotate(3deg) scale(1.05); }
}

/* Spin */
.spin {
  display: inline-block;
  transform-origin: center center;
  animation: spin 8s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Spin & size*/
.spin-size {
  display: inline-block;
  transform-origin: center center;
  animation: spin 8s linear infinite;
}

@keyframes spin-size {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg); }
}

/* Stretch */

.stretch {
  display: inline-block;
  transform-origin: center center; /* Dreh-/Skalierungszentrum */
  transform-box: fill-box;         /* Für SVG wichtig */
  animation: stretch 3s ease-in-out infinite;
}

@keyframes stretch {
  0%, 100%   { transform: scaleX(1) scaleY(1); }
  25%        { transform: scaleX(1.2) scaleY(0.8); }
  50%        { transform: scaleX(0.8) scaleY(1.2); }
  75%        { transform: scaleX(1.1) scaleY(0.9); }
}

/* idle-bounce */
.idle-bounce {
  display: inline-block;
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: bounce 1s ease-in-out infinite alternate;
}

@keyframes bounce {
  0%   { transform: scaleX(1) scaleY(1); }
  50%  { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* pen drawing */
.pen-write {
  display: inline-block;
  transform-origin: bottom left; /* Pivot unten an der Stiftspitze */
  animation: pen-write 1.5s linear infinite;
}

@keyframes pen-write {
  0%   { transform: rotate(-6deg) translate(0, 0); }
  20%  { transform: rotate(-12deg) translate(12px, 12px); }
  40%  { transform: rotate(-14deg) translate(24px, 12px); }
  60%  { transform: rotate(-12deg) translate(36px, 6px); }
  80%  { transform: rotate(-9deg) translate(18px, 0px); }
  100%  { transform: rotate(-6deg) translate(0px, 0px); }
}

/*** Für Startseite ***/
/* Etiketten */
.calendar-container {
  perspective: 1000px; /* Wichtiger 3D-Effekt */
}

.flip-page {
  transform-origin: 20% 20%;
  animation: flip-linear 0.11s linear 10 forwards,
             flip-eased 0.31s ease-out 1 forwards 1.1s; /* 10*0.11s = 1.1s Delay */
}

@keyframes flip-linear {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg) translateZ(-1px); }
  100% { transform: rotateX(360deg); }
}

@keyframes flip-eased {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg) translateZ(-1px); }
  100% { transform: rotateX(360deg); }
}

/* Person */
.bouncy {
  transform-origin: bottom center;
  animation: bouncing 0.65s ease-in-out forwards;
animation-iteration-count: 2;   /* Anzahl der Wiederholungen */
  animation-fill-mode: forwards;
}

@keyframes bouncing {
  0%   { transform: scale(1) translateY(0px); }
  25%  { transform: scale(1.05) translateY(-3px); }
  50%  { transform: scale(1) translateY(0px); }
  75%  { transform: scale(1.05) translateY(-3px); }
  100% { transform: scale(1) translateY(0px); }
}

/* Etiketten */
.bounce-rotate {
  transform-origin: center; /* Drehpunkt in der Mitte */
  animation: bounce-rotate-fast 1.5s ease-in-out 1 forwards, bounce-rotate-slow 2.9s ease-in-out infinite 1.5s;
}

@keyframes bounce-rotate-fast {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(60deg); }
  20%  { transform: rotate(-60deg); } 
  30%  { transform: rotate(60deg); } 
  40%  { transform: rotate(-60deg); } 
  50%  { transform: rotate(60deg); }
  60%  { transform: rotate(-60deg); } 
  70%  { transform: rotate(60deg); }
  80%  { transform: rotate(-60deg); } 
  90%  { transform: rotate(60deg); }
  100% { transform: rotate(0deg); }
}

@keyframes bounce-rotate-slow {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(0deg); }  /* zurückfedern */
  75%  { transform: rotate(10deg); }  /* nochmal hoch */
  100% { transform: rotate(0deg); }
}





/* Horizontales Scrollen wie Karussell auf Mobile */
@media (max-width: 768px) {
		.video-mobile{
		display: block;
	}
	
	.video-desktop{
		display: none;
	}
	
  .wp-block-columns.contacts-blocks {
    display: flex !important;        /* Flexbox */
    flex-wrap: nowrap !important;    /* Keine Zeilenumbrüche */
    overflow-x: hidden !important;     /* Horizontal scrollen */
    scroll-snap-type: x mandatory;   /* Snap-Effekt */
    -webkit-overflow-scrolling: touch; /* Sanftes Scrollen auf iOS */
  }

  .wp-block-columns.contacts-blocks .wp-block-column {
    flex: 0 0 100% !important;       /* Jede Spalte füllt den Viewport */
    scroll-snap-align: start;        /* Snap-Start für jede Spalte */
    box-sizing: border-box;
    padding-right: 16px;             /* Optionaler Abstand zwischen den Slides */
  }
}




/************* Mobile **************/
@media (max-width: 768px) {
/**** Font Überschrift ****/
p{
	font-size: 1.1rem;
font-family: "klavika-web-display", sans-serif;
font-weight: 100;
font-style: normal;
}

.h2-large{
	font-size: 2.6rem;
}

.h2-middle{
	font-size: 1.8rem;
}

h3{
	font-size: 1.375rem;
	margin-bottom: 0;
}
	
.text-container-width{
width: 100%;
}


/**** Mobile paddings und margins links rechts ****/	
	
  .mobile-margin {
    margin-left: calc(var(--wp--preset--spacing--40) * -1)!important;
    margin-right: calc(var(--wp--preset--spacing--40) * -1)!important;
  }
	
.mobile-margin-zero {
    margin-left: calc(var(--wp--preset--spacing--0) * -1)!important;
    margin-right: calc(var(--wp--preset--spacing--0) * -1)!important;
  }
	
  .mobile-padding {
    padding-left: var(--wp--preset--spacing--40) !important;
    padding-right: var(--wp--preset--spacing--40) !important;
  }
	
  .mobile-padding-zero {
    padding-left: var(--wp--preset--spacing--0) !important;
    padding-right: var(--wp--preset--spacing--0) !important;
  }

/*** 2-Spaltige Elemente (Desktop) 2 Zeilig in Mobile (Abstand 1. zu 2. Element) ***/
div.gap{
	gap: 80px;
}

/*** Formatierung 1. Sektion ***/

div.plain-container{
	display: inline-block;
}

div.plain-container > div:first-child{
	position: relative;
    z-index: 10;
	margin-top: 50px;
}

div.plain-container > div:nth-child(2){
	width: 100%;
    right: 0;
    float: right;
    position: relative;
}
	
.align-left, .align-left div{
		text-align: left!important;
}	
	
	/*** Block space für mobile ***/
	.wp-block-spacer{
		height: 40px!important;
	}	
	
	
/*** Carousel-Slider mobile ***/
.carousel-item, .carousel-item-2, .carousel-item-mirror, .carousel-item-mirror-2 {
	height: 420px!important;
	margin: auto auto;
	}

.carousel-item img, .carousel-item-2 img, .carousel-item-mirror img, .carousel-item-mirror-2 img{
	position:relative;
	right: 160px;
	}

	.wp-block-column.is-vertically-aligned-center.mobile-padding.mobile-margin.is-layout-flow.wp-block-column-is-layout-flow {
    order: 2;
}
	
}