/*
Theme Name: Holzbau Springer
Theme URI: https://www.holzbau-springer.at/
Author: Holzbau Springer GmbH
Author URI: https://www.holzbau-springer.at/
Description: Individuelles WordPress-Theme für Holzbau Springer GmbH, Lienz/Osttirol. Nachgebaut nach dem bestehenden Webauftritt (Startseite, Über uns, Referenzen, Bilder, Kontakt) inkl. automatischem Setup von Seiten, Referenzen- und Galerie-Beiträgen sowie Menü bei Theme-Aktivierung.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: holzbau-springer
Tags: custom-menu, featured-images, translation-ready, one-column, two-columns
*/

/* ==========================================================================
   1. Basis / Reset
   ========================================================================== */
:root{
  --hbs-brown-dark:#4a2c14;
  --hbs-brown:#603813;
  --hbs-brown-light:#714721;
  --hbs-cream:#f7f1e1;
  --hbs-cream-2:#eddf94;
  --hbs-orange:#e47405;
  --hbs-orange-light:#f3963a;
  --hbs-text:#4a4a4a;
  --hbs-text-light:#7b7b7b;
  --hbs-border:#e6ddc4;
  --hbs-white:#ffffff;
  --hbs-max-width:1140px;
  --hbs-radius:6px;
  --hbs-font-heading:'Doppio One', Georgia, 'Times New Roman', serif;
  --hbs-font-body:'Jost', Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--hbs-font-body);
  color:var(--hbs-text);
  background:var(--hbs-cream);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--hbs-brown); text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--hbs-orange);}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--hbs-font-heading);
  color:var(--hbs-brown-dark);
  font-weight:400;
  line-height:1.25;
  margin:0 0 .6em;
}
h1{font-size:clamp(2rem,4.5vw,3.2rem);}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
h3{font-size:1.5rem;}
h4{font-size:1.2rem;}
h5{font-size:1.15rem; color:var(--hbs-brown);}
h6{font-size:1rem; letter-spacing:.03em; text-transform:uppercase; color:var(--hbs-brown);}
p{margin:0 0 1.1em;}
.container{max-width:var(--hbs-max-width); margin:0 auto; padding:0 24px;}
.clear{clear:both;}
.screen-reader-text{position:absolute; left:-9999px;}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn{
  display:inline-block;
  background:var(--hbs-orange);
  color:#fff;
  padding:13px 30px;
  border-radius:30px;
  font-family:var(--hbs-font-body);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  border:none;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.btn:hover{background:var(--hbs-orange-light); color:#fff; transform:translateY(-1px);}
.btn.btn-outline{background:transparent; color:var(--hbs-brown); border:2px solid var(--hbs-brown); padding:11px 28px;}
.btn.btn-outline:hover{background:var(--hbs-brown); color:#fff;}

/* ==========================================================================
   3. Header / Navigation
   ========================================================================== */
#site-header{
  background:var(--hbs-white);
  border-bottom:4px solid var(--hbs-orange);
  position:relative;
  z-index:100;
}
.header-inner{
  max-width:var(--hbs-max-width);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-logo img{max-height:64px; width:auto;}
.site-logo{display:flex; align-items:center; gap:12px;}
.site-logo .site-title-fallback{font-family:var(--hbs-font-heading); font-size:1.4rem; color:var(--hbs-brown-dark);}

#primary-menu{display:flex; gap:8px;}
#primary-menu li a{
  display:block;
  padding:10px 16px;
  color:var(--hbs-brown-dark);
  font-weight:600;
  border-radius:4px;
  font-size:.98rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
#primary-menu li a:hover,
#primary-menu li.current-menu-item a{color:var(--hbs-orange);}

.menu-toggle{
  display:none;
  background:none;
  border:2px solid var(--hbs-brown);
  border-radius:6px;
  padding:8px 12px;
  cursor:pointer;
  color: var(--hbs-brown-dark);
}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--hbs-brown-dark); margin:4px 0;}

@media (max-width:860px){
  .menu-toggle{display:inline-block;}
  #primary-menu{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--hbs-white);
    flex-direction:column;
    border-top:1px solid var(--hbs-border);
    box-shadow:0 8px 16px rgba(0,0,0,.08);
  }
  #primary-menu.is-open{display:flex;}
  #primary-menu li a{padding:14px 24px; border-bottom:1px solid var(--hbs-border);}
}

/* ==========================================================================
   4. Hero / Slider (Startseite)
   ========================================================================== */
.hero{
  position:relative;
  background:linear-gradient(135deg, var(--hbs-cream-2) 0%, var(--hbs-cream) 60%);
  overflow:hidden;
}
.hero-slides{position:relative;}
.hero-slide{
  display:none;
  align-items:center;
  max-width:var(--hbs-max-width); margin:0 auto; padding:56px 24px;
  min-height:380px;
}
.hero-slide.is-active{display:flex; animation:hbsFadeIn .6s ease;}
@keyframes hbsFadeIn{from{opacity:0;} to{opacity:1;}}
.hero-slide-text{flex:1; padding-right:40px; max-width:480px;}
.hero-slide-text h1{margin-bottom:.3em;}
.hero-slide-text p{font-size:1.1rem; color:var(--hbs-text-light);}
.hero-slide-img{flex:1; text-align:center;}
.hero-slide-img img{max-height:420px; margin:0 auto;}
.hero-dots{display:flex; justify-content:center; gap:8px; padding:16px 0 26px;}
.hero-dots button{
  width:10px; height:10px; border-radius:50%;
  border:none; background:var(--hbs-border); cursor:pointer; padding:0;
}
.hero-dots button.is-active{background:var(--hbs-orange);}
@media (max-width:760px){
  .hero-slide{flex-direction:column; text-align:center; padding:32px 20px; min-height:auto;}
  .hero-slide-text{padding-right:0; max-width:100%; margin-bottom:20px;}
  .hero-slide-img img{max-height:220px;}
}

/* ==========================================================================
   5. Sections / Grid
   ========================================================================== */
.section{padding:70px 0;}
.section-tight{padding:40px 0;}
.section-alt{background:var(--hbs-white);}
.section-title{text-align:center; margin-bottom:44px;}
.section-title p{color:var(--hbs-text-light); max-width:640px; margin:10px auto 0;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:40px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.feature-card{
  background:var(--hbs-white);
  border:1px solid var(--hbs-border);
  border-radius:var(--hbs-radius);
  padding:32px 28px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(74,44,20,.1);}
.feature-card h5{margin-bottom:.5em;}

/* Kontaktinfo Leiste am Ende der Startseite */
.contact-strip{background:var(--hbs-brown-dark); color:#f3ead9;}
.contact-strip h6{color:var(--hbs-cream-2);}
.contact-strip a{color:var(--hbs-orange-light);}
.contact-strip p{color:#d8c9ad; margin-bottom:0;}
.contact-strip .grid-3{align-items:start;}

/* ==========================================================================
   6. Breadcrumb / Innenseiten
   ========================================================================== */
.breadcrumb{background:var(--hbs-white); border-bottom:1px solid var(--hbs-border); padding:14px 0;}
.breadcrumb p{margin:0; font-size:.9rem; color:var(--hbs-text-light);}
.breadcrumb a{color:var(--hbs-brown);}
.page-hero{background:var(--hbs-cream-2); padding:50px 0 40px; text-align:center;}
.page-hero h1{margin-bottom:0;}

/* ==========================================================================
   7. Über uns
   ========================================================================== */
.about-wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:start;}
.about-wrap .highlight{font-family:var(--hbs-font-heading); font-size:1.4rem; color:var(--hbs-brown); margin-bottom:.8em;}
.about-photo img{border-radius:var(--hbs-radius); box-shadow:0 18px 40px rgba(74,44,20,.18);}
.about-photo figcaption{text-align:center; margin-top:10px; font-size:.9rem; color:var(--hbs-text-light);}
@media (max-width:820px){.about-wrap{grid-template-columns:1fr;} .about-photo{order:-1; max-width:320px; margin:0 auto 20px;}}

/* ==========================================================================
   8. Referenzen
   ========================================================================== */
.ref-card{background:var(--hbs-white); border:1px solid var(--hbs-border); border-radius:var(--hbs-radius); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease;}
.ref-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(74,44,20,.12);}
.ref-card img{aspect-ratio:4/3; object-fit:cover; width:100%;}
.ref-card-body{padding:20px 22px;}
.ref-card-body h5{margin-bottom:.1em;}
.ref-card-body .ref-sub{font-size:.85rem; color:var(--hbs-orange); font-weight:600; margin-bottom:.5em;}
.ref-card-body p{color:var(--hbs-text-light); font-size:.95rem; margin-bottom:0;}

/* ==========================================================================
   9. Bilder / Galerie + Lightbox
   ========================================================================== */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-item{position:relative; cursor:pointer; overflow:hidden; border-radius:var(--hbs-radius); background:#000;}
.gallery-item img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .4s ease;}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(20,10,0,.82), rgba(20,10,0,0));
  color:#fff; padding:34px 16px 14px;
  opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover .gallery-caption{opacity:1;}
.gallery-caption strong{display:block; font-family:var(--hbs-font-heading); font-size:1rem;}
.gallery-caption span{font-size:.82rem; color:#e3d6bd;}

#hbs-lightbox{
  position:fixed; inset:0; background:rgba(20,10,0,.92);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:30px;
}
#hbs-lightbox.is-open{display:flex;}
#hbs-lightbox img{max-height:85vh; max-width:90vw; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
#hbs-lightbox .lb-close, #hbs-lightbox .lb-prev, #hbs-lightbox .lb-next{
  position:absolute; background:rgba(255,255,255,.12); border:none; color:#fff;
  width:46px; height:46px; border-radius:50%; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#hbs-lightbox .lb-close{top:24px; right:24px;}
#hbs-lightbox .lb-prev{left:24px; top:50%; transform:translateY(-50%);}
#hbs-lightbox .lb-next{right:24px; top:50%; transform:translateY(-50%);}
#hbs-lightbox .lb-close:hover, #hbs-lightbox .lb-prev:hover, #hbs-lightbox .lb-next:hover{background:var(--hbs-orange);}
#hbs-lightbox .lb-caption{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#f1e6cf; font-size:.95rem;}

/* ==========================================================================
   10. Kontakt
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:50px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.map-frame{border-radius:var(--hbs-radius); overflow:hidden; margin-bottom:36px; border:1px solid var(--hbs-border);}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; text-transform:uppercase; letter-spacing:.02em; color:var(--hbs-brown);}
.form-row input, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--hbs-border); border-radius:4px;
  font-family:var(--hbs-font-body); font-size:1rem; background:var(--hbs-white);
}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--hbs-orange);}
.form-note{font-size:.85rem; color:var(--hbs-text-light); margin-top:10px;}
.form-success{background:#eef8ee; border:1px solid #b9dfb9; color:#2b6b2b; padding:14px 18px; border-radius:4px; margin-bottom:18px;}
.form-error{background:#fbeceb; border:1px solid #e6b3b0; color:#a12f2a; padding:14px 18px; border-radius:4px; margin-bottom:18px;}

.address-block{margin-bottom:30px;}
.address-block h5{margin-bottom:.4em;}
.address-block p{color:var(--hbs-text-light); font-size:.95rem;}

/* ==========================================================================
   11. Footer
   ========================================================================== */
#site-footer{background:var(--hbs-brown-dark); color:#d8c9ad; padding:50px 0 26px;}
#site-footer h6{color:var(--hbs-cream-2); margin-bottom:.7em;}
#site-footer a{color:#f0e2c4;}
#site-footer a:hover{color:var(--hbs-orange-light);}
#site-footer img.footer-logo{max-height:52px; margin-bottom:12px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:36px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr; text-align:left;}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:18px; font-size:.82rem; color:#b9a884; text-align:center;}

/* ==========================================================================
   12. Generic page.php fallback
   ========================================================================== */
.entry-content{max-width:800px;}
.entry-content img{border-radius:var(--hbs-radius);}