/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
*/

/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
--color1:#FFB005; /* Links | gelb */
--color2:#EC7211; /* Linkhover | orange */
--color3:#eee; /* sehr hellgrau */	
--color4:#5a5a5a; /* hellgrau, Menühover */
--color5:#222; /* dunkelgrau */
--color6:rgba(255, 255, 255, 0.75); /* ::selection */
--color8:white; /* */
--color9:black; /* */
--wp--style--global--content-size:1015px;	
--wp--preset--font-size--large:clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.175rem); /* ursprgl. clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem) */
}
:root :where(.wp-block-group.is-style-section-4--5) {
background-color:#EDEDED;
color:var(--wp--preset--color--accent-2);
}

/* damit im eingeloggten Zustand bei einer Seite diverse Punkte der Admin Bar ausblenden, zb. "Edit with BeBuilder" */
#wp-admin-bar-wp-logo,#wp-admin-bar-comments,#wp-admin-bar-new-content,#wp-admin-bar-llar-root,#wp-admin-bar-duplicate-post,#wp-admin-bar-new-draft,#wp-admin-bar-search{display:none;}
#wpadminbar a{color:white!important;}

.displaynone{
display:none;
}

@media only screen and (max-width:780px) {
.desktop{ display:none!important; }
.mobile{ display:flex!important; }
}
@media only screen and (min-width:781px) {
.desktop { display:flex!important; }
.mobile { display:none!important; }
}  

::-moz-selection { background:var(--color5); color:var(--color8); }
::selection { background:var(--color5); color:var(--color8); }

/* kein Rahmen mehr beim Anklicken der Menüpunkte */
body.keyboard-support a:focus{
outline:none!important;
}
/* keine Hintergrundfarbe bei Klick auf Menu-Burger oder einen mobilen Menüpunkt */
a{
-webkit-tap-highlight-color:transparent;
}

/* Sprung zu #anchor rechnet die Höhe vom Sticky Header mit ein */
:root{
scroll-padding-top:120px; /* Sticky-Header-Höhe */
}


/* Linie unter Überschriften */
h2{
line-height:1.5em;
padding-top:15px;
padding-bottom:15px;
text-decoration-line:underline;
text-decoration-color:#333; 
text-decoration-style:solid;
text-decoration-thickness:1px;
text-underline-offset:10px;
}
h2 a:hover{
text-decoration:none;
}
@media (max-width: 780px) { 
h2{
text-underline-offset:5px;
}
h2.wp-block-heading{
font-size:28px!important;
line-height:1.1em;
}
}
h3{
font-size:24px;
font-weight:500;
line-height:1.2em;
}
@media (max-width: 780px) { 
h3.wp-block-heading{
font-size:18px;
line-height:0.9em;
}
}

strong{
font-weight:bold;
}
.blocksatz{
text-align:justify;
}
@media (max-width:780px){ 
p{
font-size:16px;
text-align:left!important;
}
}
li{
font-size:var(--wp--preset--font-size--medium);
}


main{
margin-top:25px!important;
} 

/* Inhaltsblöcke */  
/* schwarze Zwischenbereiche */
[class^="is-style-section"] div,
[class*=" is-style-section"] div{
max-width:none;
}   

/* Blöcke mit Rändern und Listen */
@media (max-width: 780px) {
div.wp-block-column.has-border-color{
padding-left:20px!important;
padding-right:5px!important;
}
}


/* HOME */
  

/* HEADER */
header{
position:sticky;
top:0;
background-color:white;
z-index:999;
border-bottom:1px solid #111;
}
@media only screen and (min-width:781px){
header .wp-block-group .wp-block-group{
padding-left:0;
}
}

/* MENÜ */
:where(.wp-site-blocks :focus){
/* outline:1px solid #111; */
outline:0;
outline-offset:8px;
}   

/* Mobile-Menü: nicht Vollhöhe, sondern nur bis zum letzten Menüpunkt */
@media (max-width: 780px) {                            
  /* das Overlay selbst nicht auf 100vh ziehen */
  .wp-block-navigation__responsive-container.is-menu-open{
    height:auto!important;
    min-height:0!important;
    bottom:auto!important;
    background-image:url("/wp-content/uploads/2025/11/logo-bmf.jpg");
    background-repeat:no-repeat;
    background-position:30px 20px;
    background-size:150px auto;
    animation:fadeInBg .3s ease;
    border-bottom:1px solid #111;
}
  @keyframes fadeInBg {
    from { background-position: 16px 0; opacity: 0; }
    to   { background-position: 30px 20px; opacity: 1; }
  } 
  .wp-block-navigation__responsive-container.is-menu-open li{
    font-size:17px;    
  }
  /* Dialog / Innenfläche ebenfalls auf Inhaltshöhe */
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog{
    height:auto!important;
    min-height:0!important;
    margin-top:30px;
  } 
  /* Inhalt soll nicht scrollen, sondern “shrink-to-fit” */
  .wp-block-navigation__responsive-container-content{
    max-height:none!important;
    overflow:visible!important;
  }  
}


/* BMF Header */

/* BMF als "Bild in Text" */
.firstsection .wp-block-column p.bmf-cutout{
  position:relative;
  bottom:16px;
  margin:0 0 0 10px;
  padding: 20px 0;  
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;

  font-size: clamp(90px, 20vw, 300px);
  line-height:1;
  letter-spacing:-10px;

  display:inline-block;
  transform:scaleX(0.85) scaleY(1.5);
  transform-origin:left;

  /* Cutout */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;

  /* Bild */
  background-image:url("/wp-content/uploads/2026/02/pema_3_01_800x1067px.jpg"); /* PEMA 3 */
  background-image:url("/wp-content/uploads/2026/02/pema_2_02_1200x800px.jpg"); /* PEMA 2 */   
  background-image:url("/wp-content/uploads/2026/02/pema_2_02_1200x800pxohneampel.jpg"); /* PEMA 2 (ohne Ampel) */ 
  
  background-repeat: no-repeat;

  /* cover und leicht raus zoomen */
  background-size: 100% auto;         /* "zoom out" Look ohne Leerräume */
  background-position: 50% 50%;

  /* wichtig für smoothness */
  will-change: background-position;
}

/* Mobile Feinschliff */
@media (max-width: 780px){
  .firstsection .wp-block-column p.bmf-cutout{
    font-size: clamp(70px, 36vw, 160px);
    transform: scaleX(0.9) scaleY(1.2);
    letter-spacing: -0.05em;
    background-size: 100% auto;
    top:30px;
    right:20px;
  }
}

.firstsection h1.wp-block-heading{
margin-top:85px;
}
@media (max-width: 780px) {
.wp-container-core-group-is-layout-23270076 > .alignwide {
    max-width:100%;
}
.firstsection .wp-block-column{
padding-left:0;
padding-right:0!important;
}
:root :where(.wp-block-columns-is-layout-flex) {
column-gap:clamp(10px, 5vw, 50px)!important;
}
.firstsection h1.wp-block-heading{
margin-top:0;
margin-bottom:50px;
}
}



/* TERMIN- UND KOSTENKONTROLLE */
#terminkontrolle{}


/* PLANEN */
#planen{}


/* ÜBER MICH */
#uebermich .wp-block-image{
position:relative;
bottom:20px;
}
@media (max-width:780px) {
#uebermich .wp-block-image{
text-align:center;
bottom:0;
}
#uebermich .wp-block-image img{
width:65%;
}
}


/* REFERENZEN */
@media only screen and (min-width:781px){
#referenzen .abfrageloop{
position:relative;
right:25px;
max-width:var(--wp--style--global--wide-size)!important;
}    
}    
#referenzen .abfrageloop .is-layout-grid{
gap:0;
}  
#referenzen .abfrageloop .wp-block-group{
padding:0!important;
}  
/* Jede Kachel als Container */
#referenzen .abfrageloop .wp-block-post-template li.wp-block-post{
position:relative;
overflow:hidden;
margin:0!important;
padding:0!important;
}     
/* Bild vollflächig */
#referenzen .abfrageloop .wp-block-post-featured-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.4s ease;
}  
/* Ganze Kachel klickbar: Link im Titel über die komplette Kachel ziehen */
#referenzen .abfrageloop .wp-block-post-title a{
position:absolute;
inset:0;   /* deckt gesamte Kachel ab */
z-index:20;
display:block;
text-decoration:none!important;
color:inherit;    /* Farbe kommt vom Span unten */
} 
/* Titel-Container unten */
#referenzen .abfrageloop .wp-block-post-title{
position:absolute;
left:0;
right:0;
bottom:0;
z-index:25;     /* über dem Bild */
margin:0 !important;
padding:0!important;
}
/* Textleiste unten (volle Breite, linksbündig) */
#referenzen .abfrageloop .wp-block-post-title a::after{
content:attr(aria-label); /* falls WP aria-label setzt */
}
/* echte Leiste unten: wir nutzen ein inneres "Pseudo-Overlay" */
#referenzen .abfrageloop .wp-block-post-title a::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:56px;   /* Höhe der Titel-Leiste */
background:rgba(0,0,0,0.75);
z-index:-1;
} 
#referenzen .abfrageloop .wp-block-post-title a{
/* Besser/robuster: wir stylen den Link selbst als Leiste */
display:flex;
align-items:flex-end;
justify-content:flex-start;
padding:0 16px 14px 16px;  /* links + unten */
/* Titeltext unten links */
color:#fff !important;
font-size:1.1rem;      
font-weight:600;
/* Trick: Text bleibt sichtbar über ::before */
position:absolute;
inset:0;
}
/* Hover Zoom */
#referenzen .abfrageloop .wp-block-post-template li.wp-block-post:hover img{
transform:scale(1.05);
} 
/* Kategorie direkt über dem Titel */
#referenzen .wp-block-post-terms.taxonomy-category {
position:absolute;
bottom:10px;
right:15px;
z-index:30;
}
#referenzen .wp-block-post-terms.taxonomy-category a{
font-size:0.75rem;
color:rgba(255,255,255,0.8);
text-decoration:none;
}


/* BUTTONS */
/* "Mehr laden" Button = qlm (query_load_more_button) */
.qlm-wrap{
margin-block-start:2.5rem;
text-align:center;
}
.qlm-wrap button.qlm-btn,.wp-block-button .wp-block-button__link.wp-element-button{
background-color:white!important;
color:black;
padding:12px 24px;
text-transform:uppercase;
font-family:inherit;
font-size:16px;
font-weight:400;
border:none;
border-radius:0;
opacity:1;
transition:0.3s;
}
.qlm-wrap button.qlm-btn:hover,.wp-block-button .wp-block-button__link.wp-element-button:hover{
opacity:0.9;
}
/* Pagination ausblenden (wg. Implementierung von "Mehr laden" Button */
.wp-block-query .wp-block-query-pagination{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}



/* LEISTUNGEN */
#leistungen .wp-block-image{
position:relative;
bottom:25px;
}
@media (max-width:780px) {
#leistungen .wp-block-image{
text-align:center;
bottom:0;
}
#leistungen .wp-block-image img{
width:65%;
}
}
@media (min-width:781px) {
.leistungen-bloecke{
position:relative;
right:25px;
}
}
  
  
/* TESTIMONIAL */  
@media (max-width: 780px) {
#testimonial figure.wp-block-image{   
margin-inline-start:0;
}  
#testimonial .wp-block-image{
text-align:center;
}  
}
        


/* PROJEKTE */
/* Detailseiten */
.single .wp-block-post-featured-image{
display:none;
}
.single .wp-block-post-title + figure + .wp-block-group{
display:none;
}
/* rechte Spalte klebt beim Scrollen oben */
.single .wp-block-columns{
  align-items: flex-start;
  overflow: visible;
}
.single .wp-block-columns > .wp-block-column:nth-of-type(2){
  align-self: flex-start;
} 
@media only screen and (min-width:781px) {
.single .wp-block-columns .wp-block-column:nth-child(2){
position:sticky;
top:135px; /* Abstand zum oberen Rand */
}
}
.single main.wp-block-group div.wp-block-group:first-child div.wp-block-group:nth-last-child(2){
display:none;
}
.single main.wp-block-group div.wp-block-group:first-child{
padding-bottom:0!important;
}
/* Weitere Beiträge */
.single main.wp-block-group div.wp-block-group:nth-child(2){
display:none;
}


/* FOOTER */
footer div{
padding-top:0!important;
}
footer figure img{
width:auto;
height:215px!important;
position:relative;
top:30px;
}
@media only screen and (max-width:780px){
footer h2.wp-block-site-title a{
font-size:23px;
}
footer figure img{
display:none;
}
}
/* BACK TO TOP */
.progress-wrap::after{
color:dimgray!important;
}
@media only screen and (max-width:780px){    
.progress-wrap.btn-right-side{
right:5px!important;
}
}