/*
Theme Name: Haagdesign
Theme URI: https://haag-webdesign.de
Description: Child Theme für Twenty Twenty-Five
Author: Sabine Haag
Author URI: https://haag-webdesign.de
Template: twentytwentyfive
Version: 1.0
Text Domain: haagdesign
*/
/*
@charset "UTF-8";

/*
Weitere css Anweisungen
*/
.sticky {
	position: fixed !important;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	z-index: 1000;
}
.nav-bar {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	height: 55px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.0);
	transition: all 800ms;
	z-index: 101;
}
/* Navbar my-header-light ohne Farbwechsel */
.nav-bar-bg {
	position: fixed;
	top: 0;
	display: block;
	width: 100%;
	height: 55px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	z-index: 101;
}
/* Siehe Zeile 135 nav-bar scrolled BG white und li bg transition */
.wp-block-navigation ul li {
	margin-left: 10px;
	font-weight: 400;
	padding: 0 4px;
	border-radius: 2px;
    background: rgba(255, 255, 255, 0); /* default color */
    
	/* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(247, 141, 168, 1) 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
.wp-block-navigation ul li:hover {
    background-position: left;
}
	/* Footer Menu */
footer .wp-block-navigation ul li {
	border-left: 1px solid #cf2e2e;
	padding-left: 5px;
	width: stretch;
}
/* Navigation-Block (Hamburger-Menü) Breakpoint anpassen */
@media screen and (max-width: 1024px) {
    .wp-block-navigation__responsive-container-open {
        display: block !important;
    }
    .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
        display: none !important;
    }
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  	display: block;
	width: 60vw;
 	margin-bottom: 20px;
	background-color:rgba(255, 0, 128, 0.2)!important;
 	color:inherit!important;
 	border-bottom: 1px solid rgb(66, 0, 61);
}
/*
.wp-block-navigation__responsive-container-open svg {
	height: 30px;
	width: 35px;
	background-color: rgba(234, 234, 255, 0.5);
	border-radius: 5px;
}
	*/
/* --- Wichtig: Standard-SVGs ausblenden --- */

/* Selektor für das Öffnen- und das Schließen-Icon, wenn das Overlay nicht immer sichtbar ist */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container:not(.always-shown) .wp-block-navigation__responsive-container-close svg {
    /* Blendet das Twenty Twenty-Five Standard-SVG-Icon aus */
    display: none!important; 
}


/* --- 📐 Deinen eigenen Burger-Icon einfügen (Öffnen) --- */

.wp-block-navigation__responsive-container-open {
    /* Definiere Größe und Position für dein Icon */
    width: 30px; /* Oder die gewünschte Breite */
    height: 26px; /* Oder die gewünschte Höhe */
	background-color: rgba(234, 234, 255, 0.5);
    
    /* Setze dein benutzerdefiniertes Bild/SVG als Hintergrund */
    background-image: url("../graphics/menu.svg"); /* ⬅️ WICHTIG: Pfad anpassen */
	background-size: contain; /* Bildgröße anpassen */
    background-repeat: no-repeat;
    background-position: center;
}

/* --- ❌ Dein eigenes Schließen-Icon einfügen (optional) --- */

.wp-block-navigation__responsive-container:not(.always-shown) .wp-block-navigation__responsive-container-close {
    /* Definiere Größe und Position für dein Icon */
    width: 30px; 
    height: 30px;
    
    /* Setze dein benutzerdefiniertes Bild/SVG als Hintergrund */
    background-image: url("../graphics/close.svg"); /* ⬅️ WICHTIG: Pfad anpassen */
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* hk_script_navbarscroll.js BG white */
.nav-bar.scrolled {
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	transition: all 800ms;
}
/* hk_script_navbarscroll-color.js link farben wechsel mit scrolled */
.nav-bar-color ul li a {
	color: rgb(255, 255, 255)!important;
}
.nav-bar-color ul li a:hover {
	color: rgb(255, 255, 255)!important;
	text-decoration: none!important;
}
.nav-bar-color.scrolled ul li a,
.nav-bar-bg ul li a {
	color: rgba(207, 46, 46, 1)!important;
}
.nav-bar-color.scrolled ul li a:hover,
.nav-bar-bg ul li a:hover {
	color: rgba(207, 46, 46, 1)!important;
	text-decoration: none!important;
}

/*  Farbwechsel bei SVG-Logo */
.nav-bar-color svg {
    fill: #ffffff;
}
.nav-bar-color a:hover svg {
    fill: rgba(207, 46, 46, 1);
}
.nav-bar-color.scrolled svg,
.nav-bar-bg svg {
    fill: #000000;
}
.nav-bar-color.scrolled a:hover svg,
.nav-bar-bg a:hover svg {
    fill: rgba(207, 46, 46, 1);
}
/*
 * Link styles aus style.css rewrite
 */
 a.logo-menu {
	height:26px;
 }
a {
	text-decoration: none!important;
	text-decoration-thickness: 0px !important;
	text-underline-offset: 0px;
}
a:where(:not(.wp-element-button)) {
	color: #333333 !important;
}
a:hover:where(:not(.wp-element-button)) {
	color: rgba(207, 46, 46, 1) !important;
}

/* SVG Person in Menu as member */
li.nav-icon-member a.wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  position: relative;
}

li.nav-icon-member a.wp-block-navigation-item__content::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../graphics/person.svg") no-repeat center / contain;
  mask: url("../graphics/person.svg") no-repeat center / contain;
}

li.nav-icon-member .wp-block-navigation-item__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-offset: 0;
	outline-width: 0px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}
/* List Style Type auf Quadrat aendern*/
ul.wp-block-list {
    list-style-type: square;
}
.p-left-right-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.footer-block {
	-webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	margin-top: 0;
}
.footer-block a:hover svg {
    fill: rgba(207, 46, 46, 1);
}
.full-height {
	height: 100vh;
}
.wp-site-blocks footer {
	margin-top: 0px;
}
/* --------------------------------------
   Social Links Block Style: Haagdesign NEU
   -------------------------------------- */
.wp-block-social-links.is-style-haagdesign {
    gap: 0.6rem;
}
.wp-block-social-links.is-style-haagdesign .wp-block-social-link {
    background-color: #ffffff !important;
    border: 1px solid #cf2e2e;
    border-radius: 4px;
    padding: 1px;
    transition: all 0.2s ease-in-out;
}

.wp-block-social-links.is-style-haagdesign .wp-block-social-link a {
    color: #cf2e2e !important;
}

.wp-block-social-links.is-style-haagdesign .wp-block-social-link:hover {
    background-color: #f78d8a !important;
    border-color: #f78d8a;
}

.wp-block-social-links.is-style-haagdesign .wp-block-social-link:hover a {
    color: #cf2e2e !important;
}
.wp-block-social-links.is-style-haagdesign .wp-social-link svg {
	width: 36px !important;
	height: 36px !important;
}
:root :where(.wp-block-social-links.is-style-haagdesign .wp-social-link a) {
	padding: 0px !important;
}
/* --------------------------------------
	Effekte
	-------------------------------------- */
.startbild2.wp-block-cover .wp-block-cover__image-background {
	animation: landscape2 20s linear infinite;
	transform-origin: center;
}
.startbild2.wp-block-cover {
    overflow: hidden; /* verhindert, dass das Bild über den Rand hinausgeht */
}
@keyframes landscape2 {
    0%   { transform: scale(1)    translateX(0)    translateY(0); }
    25%  { transform: scale(1.05) translateX(-1%)  translateY(1%); }
    50%  { transform: scale(1.08) translateX(1%)   translateY(-1%); }
    75%  { transform: scale(1.05) translateX(-1%)  translateY(2%); }
    100% { transform: scale(1)    translateX(0)    translateY(0); }
}
@keyframes landscape2_s {
    0%   { transform: scale(1)    translateX(0)    translateY(0); }
    25%  { transform: scale(1.05) translateX(-1%)  translateY(1%); }
    50%  { transform: scale(1.08) translateX(1%)   translateY(-1%); }
    75%  { transform: scale(1.05) translateX(-1%)  translateY(2%); }
    100% { transform: scale(1)    translateX(0)    translateY(0); }
}

/* Down-Pfeil als Button */
.wp-block-button.is-style-pfeil-anker .wp-block-button__link {
  background-color: transparent;
  background-image: url("../graphics/down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: none;
  color: transparent;
  border-radius: 50%;
  content: "\00a0";
  animation: hovering 3s ease-in-out infinite;	
}
@keyframes hovering {
    from {transform:translate(0, 0px);}
    50% {transform:translate(0, -25px);}
    to {transform: translate(0, -0px);}
}
.wp-block-button.is-style-pfeil-anker.ist-hell .wp-block-button__link {
  filter: invert(1);
}
/* My CTA Button*/
.wp-block-button.is-style-my-cta-button .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-2);
  border: none;
  color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-my-cta-button .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-4);
}