/*======================================
Theme Name: Twentytwentyfive Chield Theme
Theme URI: 
Description: Ein Child Theme für Twenty Twenty-Five
Version: 1.0
Author: Thomas K
Author URI: https://www.blueflexx.com
Template: twentytwentyfive
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

/* Hier werden die Breiten für die Seite eingestellt!  */
.wp-block {
    max-width: 900px; /* normale Breite */
}

.wp-block.alignwide {
    max-width: 1250px; /* weite Breite */
}

.wp-block.alignfull {
    width: 100%; /* volle Breite */
}

/* Verkleinertes Logo bei Scrollen */
.small-logo {
  width: 100px!important;
  height: auto;
}

/* Header-Styling */
header {
  transition: top 0.5s ease; /* Glatter Übergang */
  position: fixed; /* Header fixieren, um das Verschieben zu ermöglichen */
  width: 100%; /* Breite des Headers über die Seite */
  top: 0;
  z-index: 1000; /* Sicherstellen, dass es über anderen Elementen bleibt */
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
}

.hide-header {
  top: -100px; /* Header nach oben verschieben, passe die Höhe an die tatsächliche Header-Höhe an */
}

/* Textformatierung H1-Überschrift */
.changepic h1 {
 position:absolute;
 font-size: 3rem !important;
 font-weight: bold;
 line-height: 3rem;
 margin: 0;
 padding: 0;
 text-align: center;
 width: 100%;
 color: white;
 opacity:0.8; 
 text-shadow:
      3px 3px 10px #9a1b1b, /* #d32f2f, */
     -1px -1px 0 #ffd600, /*#808080, */  
      1px -1px 0 #ffd600,
     -1px 1px 0 #ffd600,
      1px 1px 0 #ffd600;
 top: -7rem;
 animation: SlideShowHeader 20s linear infinite 0s;       
} 

@keyframes SlideShowHeader { 
  2% {	top:-7rem;	}
  8% {	top:0rem;	}
  92% {	top:0rem;	}
  98% {	top:-7rem; }
}

/* Wechselbild */
.changepic img {
 opacity:0;
	animation: SlideShow2Picture 20s linear infinite 0s;
} 

@keyframes SlideShow2Picture { 
	0% {	opacity: 0; } /*	transform: scale(1.1) rotate(-1.5deg);	} */
	5% {	opacity: 1;	}
	50% {	opacity: 1; }
	55% {	opacity: 0; } /* transform: scale(1.2)  rotate(1.5deg);	} */
}

/* Formatierung Bilder */
.abgerundet img {
 border-top-left-radius:100px;
 border-bottom-right-radius:100px;
 object-fit:cover
} 

/* Bilder verkleinern / vergrößern bei Hover */ 
.hovershrink, .hoverexpand {
 transition-duration: 0.3s;
} 
.hovershrink:hover {
 transform: scale(0.95);
}
.hoverexpand:hover {
 transform: scale(1.05);
}

.hoveropacity {
 opacity: 1;
 transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;
} 
.hoveropacity:hover {
 opacity: 0.7;
}

.wp-block-button a {
 transition-duration: 0.3s;
} 
.wp-block-button a:hover {
 transform: scale(1.05);
}

/* Animationen für Überschriften – moderner "Wischer"-Effekt */
/* Grundstil für h2 */
h2 {
  position: relative;
  padding-left: 10px; /* Platz für den linken Balken */
  margin: 1em 0;
  overflow: hidden; /* für die Animation */
}

/* Linker roter Balken */
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: var(--wp--preset--color--accent-3); /* Rot */
}

/* Gelber Hintergrund als Wischer */
h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* Start außerhalb links */
  width: 100%;
  height: 100%;
  background-color: var(--wp--preset--color--accent-2); /* Gelb */
  transition: left 0.5s ease-in-out;
  z-index: -1;
}

/* Hover: Wischer bewegt sich von links nach rechts */
h2:hover::after {
  left: 0;
}

/* Textfarbe optional anpassen */
h2:hover {
  color: var(--wp--preset--color--contrast);
}

/* Button Stile */
/* Basis */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button {
  border-radius: 8px;
  padding: 0.6em 1.2em;
  font-weight: 600;
  text-decoration: none;
  display: inline-inline;
  transition: all .3s ease;
}

/* Rot */
.is-style-primary .wp-block-button__link,
.is-style-primary .wp-element-button {
  background-color: var(--wp--preset--color--accent-1);
  color: #fff;
}
.is-style-primary .wp-block-button__link:hover,
.is-style-primary .wp-element-button:hover {
  background-color: #b30000;
  transform: scale(1.05);
}

/* Gelb */
.is-style-yellow .wp-block-button__link,
.is-style-yellow .wp-element-button {
  background-color: var(--wp--preset--color--accent-2);
  color: #000;
}
.is-style-yellow .wp-block-button__link:hover,
.is-style-yellow .wp-element-button:hover {
  background-color: #ffda33;
  transform: scale(1.05) rotate(-1deg);
}

/* Outline (eigener Name, kollidiert nicht) */
.is-style-schoeneberg-outline .wp-block-button__link,
.is-style-schoeneberg-outline .wp-element-button {
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
}
.is-style-schoeneberg-outline .wp-block-button__link:hover,
.is-style-schoeneberg-outline .wp-element-button:hover {
  background-color: var(--wp--preset--color--contrast);
  color: #fff;
  transform: scale(1.08);
}

/* Pill */
.is-style-pill .wp-block-button__link,
.is-style-pill .wp-element-button {
  border-radius: 999px;
  background-color: var(--wp--preset--color--accent-3);
  color: #fff;
}
.is-style-pill .wp-block-button__link:hover,
.is-style-pill .wp-element-button:hover {
  opacity: .85;
  transform: translateY(-3px);
}

/* ----- FOOTER ----*/
/* Animation und Ausrichtung des Schöneberg Logos | Drehende Sonne */
.rotating-bg {
  position: relative; /* wichtig: Referenzpunkt für die absolute Grafik */
  overflow: hidden;   /* verhindert, dass die Grafik übersteht */
  perspective: 400px; /* Tiefe der 3D-Ansicht */
}

.bg-rotate {
  position: absolute;
  inset: 0; /* füllt den Container */
  background: url("http://wp25.schoeneberg-soonwald.de/wp-content/uploads/2025/08/Schoeneberg-nur-sonne.svg")
              no-repeat center/contain;
  animation: rotate 30s linear infinite;
  transform-origin: center center;
  z-index: 0;
}

.footer-content {
  position: relative;
  z-index: 1; /* Inhalt über der Grafik */
}

@keyframes rotate {
  from { transform: rotateX(45deg) rotate(0deg); }
  to   { transform: rotateX(45deg) rotate(360deg); }
}