/*
Theme Name: Fachzentrumritter
Description: Fachzentrum Ritter Theme
Author: Andreas Zimmermann
Template: twentytwentyfive
Version: 1.0.0
Text Domain: fachzentrumritter
*/
/* 
=== CHILD THEME ANPASSUNGEN ===
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Abstand für fixen Header */
}
/* Colors */
:root {
  /* Primärfarben */
  --color-primary: #ff0047;
  --color-primary-light: #60a5fa;
  --color-primary-dark: #2563eb;
  
  /* Sekundärfarben */
  --color-secondary: #049de8;
  --color-secondary-light: #a78bfa;
  --color-secondary-dark: #7c3aed;
  
  /* Neutrale Farben */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Statusfarben */
  --color-success: #10b981;
  --color-success-light: #34d399;
  --color-success-dark: #059669;
  
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  
  --color-error: #ef4444;
  --color-error-light: #f87171;
  --color-error-dark: #dc2626;
  
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;
  
  /* Hintergrundfarben */
  --bg-primary: #ffffff;
  --bg-primary-light: rgb(234, 51, 77, 0.09);
  --bg-secondary: #f9fafb;
  --bg-secondary-light: rgb(70, 155, 225, 0.09);
  --bg-dark: #1f2937;
  
  /* Textfarben */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-light: #9ca3af;
  --text-on-dark: #ffffff;
  
  /* Border-Farben */
  --border-color: #e5e7eb;
  --border-color-dark: #d1d5db;
}

/* Verwendungsbeispiele */
.bg-primary-light {
	background-color: var(--bg-primary-light);
	/* background: linear-gradient(180deg, #ffffff, var(--bg-primary-light)); */
}
.bg-secondary-light {
	background-color: var(--bg-secondary-light);
	/* background: linear-gradient(180deg, #ffffff, var(--bg-secondary-light)); */
}

/* Text Styles */
.primary-headlines h2,
.primary-headlines h3,
.primary-headlines strong {
	color: var(--color-primary);
}
.primary-headlines h2 {
	padding-top: 2rem;
}

.secondary-headlines h2,
.secondary-headlines h3,
.secondary-headlines strong {
	color: var(--color-secondary);
}
.secondary-headlines h2 {
	padding-top: 2rem;
}

/* .button-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.button-primary:hover {
  background-color: var(--color-primary-dark);
}

.text-muted {
  color: var(--text-secondary);
}

.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
} */

/* Helper */
.d-none {
	display: none !important;
}
/* Backdrop Filter */
.has-backdropfilter {
	backdrop-filter: blur(15px) brightness(1.1);
	-webkit-backdrop-filter: blur(15px) brightness(1.1);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

/* Header Overlay */
.header-overlay {
	background: #ea334d;
	color: #fafafb;
	padding: 0.5rem 1rem;
	max-width: fit-content;
	background: linear-gradient(90deg, #ff0047, #049de8);
	margin-top: -100px;
}

/* Links */
/* Sanfte Gradient-Slide Animation */
a {
	color: #049de8;
	text-decoration: none;
	transition: all 0.3s ease;
}

a:hover,
.link-gradient-smooth:hover {
	background: linear-gradient(90deg, #ff0047, #049de8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	background-size: 200% 100%;
	animation: gradientSlide 2.5s ease-in-out infinite;
}

@keyframes gradientSlide {
	0% {
		background-position: 200% 0;
	}

	50% {
		background-position: 0% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* Hauptmenu */
.wp-block-navigation ul {
	padding-top: 10px !important;
	padding-right: 10px !important;
}

/* Unterline mit Gradient-Animation */
.wp-block-navigation-link a,
.link-gradient-underline {
	color: #333;
	text-decoration: none;
	position: relative;
	transition: color 0.3s ease;
}

.wp-block-navigation-link a::after,
.link-gradient-underline::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, #ff0047, #049de8);
	transition: width 0.3s ease;
}

.wp-block-navigation-link a:hover::after,
.link-gradient-underline:hover::after {
	width: 100%;
	animation: gradientFlow 1s ease-in-out infinite;
}

.wp-block-navigation-link a:hover,
.link-gradient-underline:hover {
	background: linear-gradient(90deg, #ff0047, #049de8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

@keyframes gradientFlow {

	0%,
	100% {
		background: linear-gradient(90deg, #ff0047, #049de8);
	}

	50% {
		background: linear-gradient(90deg, #049de8, #ff0047);
	}
}



/* Content */
h1 a:hover,
.wp-block-site-title a:hover {
	text-decoration: none;
}
h1.wp-block-post-title {
	font-weight: 700;
	padding-bottom: var(--wp--preset--spacing--50);
	background: linear-gradient(90deg, #ff0047, #049de8);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  background-clip: text;
}


/* Galerie bleibt 3-spaltig*/
@media (max-width: 768px) {
  .wp-block-gallery.columns-3 .wp-block-image,
  .blocks-gallery-grid.columns-3 .blocks-gallery-item {
	width: calc(33.33% - 10px) !important;
	flex: 0 0 calc(33.33% - 10px) !important;
  }
}
/* Button */
.is-style-outline a {
	border: 3px solid transparent;
	background-image:
		linear-gradient(white, white),
		/* Innerer Hintergrund */
		linear-gradient(135deg, #049de8, #ff0047);
	/* Rahmen-Verlauf */
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.is-style-outline a:hover {
	background: linear-gradient(135deg, #e2e7e9, #f1f1f1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	border: 3px solid transparent;
}

/* Panelnavigation Bild */
figure.wp-block-image,
figure.wp-block-image {
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow: hidden;
	backdrop-filter: blur(15px) brightness(1.1);
	-webkit-backdrop-filter: blur(15px) brightness(1.1);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

figure.wp-block-image:hover,
figure.wp-block-image:hover {
	transform: translateY(-2px) scale(1.01);
	background: rgba(44, 62, 79, 0.3);
	border-color: rgba(234, 51, 77, 0.3);
}

/* Panelnavigation Text*/
figure.wp-block-image figcaption,
figure.wp-block-image figcaption {
	position: absolute;
	bottom: 0;
	background: #2c3e4f;
	font-size: 120%;
	text-shadow: none;
	margin: 2rem;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	border-right: 3px solid #fafafb;
	max-width: fit-content;
	margin-bottom: 2rem;
	/* Hover Animation Setup */
	overflow: hidden;
	cursor: pointer;
	transition: all 0.4s ease;
	backdrop-filter: blur(15px) brightness(1.1);
	-webkit-backdrop-filter: blur(15px) brightness(1.1);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

figure.wp-block-image figcaption a,
figure.wp-block-image figcaption a {
	color: #fff;
	padding: 0.5rem 2rem 0.5rem 1.25rem;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Transform Scale Animation mit ::after Pseudo-Element */
.wp-block-image .wp-element-caption::after,
.wp-block-image .wp-element-caption::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fafafb;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s ease;
	z-index: -1;
}

.wp-block-image .wp-element-caption:hover::after,
.wp-block-image .wp-element-caption:hover::after {
	transform: scaleX(1);
}

.wp-block-image .wp-element-caption:hover,
.wp-block-image .wp-element-caption:hover {
	transform: translateX(8px);
	border-right-color: #ea334d;
}

figure.wp-block-image:has(figcaption)::before,
figure.wp-block-image:has(figcaption)::before {
	max-height: fit-content;
}

/* Panelnavigation Text Overlay */
.img-panel-overlay figcaption {
	background: #ff0047;
	color: #fff;
}

/* Panelnavigation Text Background */
/* allgemein */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	text-shadow: none;
	font-size: 70%;
}
/* KFO */
.page-id-30 figure.wp-block-image-kfo img {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.page-id-30 figure.wp-block-image-kfo img:hover {
	filter: grayscale(20%);
	transition: filter 0.3s ease;
}

figure.wp-block-image-kfo figcaption,
figure.wp-block-image-kfo figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image-kfo figcaption {
	background: #ff0047;
	color: #fff;
}
/* small */
figure.wp-block-image-kfo-small figcaption {
	padding: 0.5rem;
	font-size: 70%;
}
figure.wp-block-image-kfo figcaption:hover, 
figure.wp-block-image-kfo-small figcaption:hover {
	color: #303e4e !important;
}


/* MKG */
.page-id-30 figure.wp-block-image-mkg img {
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.page-id-30 figure.wp-block-image-mkg img:hover {
	filter: grayscale(50%);
	transition: filter 0.3s ease;
}

figure.wp-block-image-mkg figcaption,
figure.wp-block-image-mkg figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image-mkg figcaption {
	background: #049de8;
	color: #fff;
}
/* small */
figure.wp-block-image-mkg-small figcaption {
	padding: 0.5rem;
	font-size: 70%;
}
figure.wp-block-image-mkg-small figcaption:hover {
	color: #303e4e !important;
	border-right-color: #049de8 !important;
}

/* Subtitle  */
:root :where(p.is-style-text-subtitle) {
	font-size: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 0.392), 1.4rem);
	margin-top: 0.5rem;
}

/* Footer */
/* Footer Button */
footer a.wp-block-button__link {
	background: linear-gradient(135deg, #ffea00, #ffea00, #ffcd02);
	color: #2c3e4f;
}

footer a.wp-block-button__link:hover {
	-webkit-text-fill-color: #2c3e4f;
	background: linear-gradient(135deg, #ffea00, #ffcd02, #ffcd02);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 224, 27, 0.4);
}

footer figure.wp-block-image {
	box-shadow: none;
	backdrop-filter: none;
}