/* ───────────────────────────────────────────────
   1. Globale Variablen & Basis
   ───────────────────────────────────────────── */
:root {
    /* Layout */
    --anchor-offset: 155px;         /* Höhe Fix‑Header */
    --logo-height-large: 130px;     /* Desktop Logo */
    --logo-height-small: 65px;      /* Shrink Logo */
    --nav-padding-large: .75rem;    /* 12 px */
    --nav-padding-small: .375rem;   /* 6 px */

    /* Design Tokens */
    --primary:        #98d4e3;
    --primary-dark:   #86bacd;
    --text-color:     #333;
    --heading-color:  #222;
}

/* Grundtypografie & Defaults */
html { scroll-behavior: smooth; }
body {
    position: relative;            /* für Scroll-Spy */
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
}

/* ───────────────────────────────────────────────
   2. Universelle Utilities
   ───────────────────────────────────────────── */
section     { scroll-margin-top: var(--anchor-offset); padding: 4rem 0; }
.content-wrapper { margin-top: var(--anchor-offset); }

/* Überschriften (wird projektweit verwendet) */
.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--heading-color);
    text-transform: uppercase;
    position: relative;
    margin: 2rem 0;
    letter-spacing: 1px;
    line-height: 1.5;
}
.section-title::after {
    content: "";
    position: absolute;
    bottom: -.25em;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    height: 4px;
    background: var(--primary);
    border-radius: 2px;
    transition: width .3s;
}
.section-title--left::after { left: 0; transform: none; }
.section-title:hover::after { width: 6rem; }

.heading-playfair {          /* falls Serif‑Variante nötig */
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
}

/* Buttons – nur primärer Stil überschreiben */
.btn-primary,
#quick-contact .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    transition: background-color .2s, border-color .2s;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Farbe‑Utilities */
.text-primary { color: var(--primary) !important; }

/* ───────────────────────────────────────────────
   3. Navigation / Header
   ───────────────────────────────────────────── */
#mainNav {
    padding: var(--nav-padding-large) 0;
    transition: padding .3s, background-color .3s;
}
#mainNav .navbar-brand img {
    max-height: var(--logo-height-large);
    transition: max-height .3s;
}

/* Shrink‑Zustand */
#mainNav.navbar-shrink {
    padding: var(--nav-padding-small) 0;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}
#mainNav.navbar-shrink .navbar-brand img {
    max-height: var(--logo-height-small);
}

/* Links */
.navbar-nav .nav-link {
    position: relative;
    padding: .5rem 1rem;
    font-weight: 600;
    color: #000;
    overflow: hidden;
    transition: transform .3s, color .3s;
}
.navbar-nav .nav-link::after {
    content:'';
    position:absolute;
    bottom:0; left:-100%;
    width:100%; height:3px;
    background: var(--primary);
    transition:left .4s;
}
.navbar-nav .nav-link:hover      { transform: translateY(-2px); color:#666; }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { left:0; }
.navbar-nav .nav-link.active     { color: var(--primary); }
.navbar-nav .nav-link .bi        { font-size:1.6rem; vertical-align:middle; margin-right:.2rem; }

/* Hamburger */
.custom-toggler {          /* Bar‑Icon – reines CSS */
    width: 32px; height: 32px; padding:0; border:0; background:none;
    display:flex; flex-direction:column; justify-content:center; cursor:pointer;
}
.custom-toggler .bar {
    width:24px; height:2px; margin:3px 0; background:#333;
    transition: transform .3s, opacity .3s, background-color .3s;
}
.custom-toggler:hover .bar                  { background: var(--primary); }
button.custom-toggler[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg);}
button.custom-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0;}
button.custom-toggler[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

/* ───────────────────────────────────────────────
   4. Banner / Hero‑Sektionen
   ───────────────────────────────────────────── */
.banner,
.hero-bg,
.service-bg,
.plissee-bg{
    position: relative;
    width:100%;
    background-size: cover;
    background-position: center;
}
.banner        { height: 700px; background-image: var(--banner-image, url('/uploads/banner/default-banner.png')); display:flex; align-items:center; justify-content:center; }
.hero-bg       { background-image: url('/theme/image/backgrounds/parkettverlegung.png'); }
.service-bg    { background-image: url('/theme/image/backgrounds/planungsservice-fuer-fussboeden.jpg'); }
.plissee-bg    { background: #fff; }

.banner::before,
.hero-bg::before,
.service-bg::before,
.plissee-bg::before{
    content:""; position:absolute; inset:0;
}
.banner::before       { background:rgba(0,0,0,.5); }
.hero-bg::before      { background:rgba(0,0,0,.2); }
.service-bg::before   { background:rgba(0,0,0,.6); }
/*.plissee-bg::before   { background:rgba(0,0,0,.6); }*/

.centered-text { position:relative; z-index:1; color:#fff; padding:20px; border-radius:10px; }

/* Container über Overlays */
.hero-bg .container,
.service-bg .container { position:relative; z-index:1; }
.plissee-bg .container { position:relative; z-index:1; }

/* ───────────────────────────────────────────────
   5. Hover‑Cards (Leistungen)
   ───────────────────────────────────────────── */
.hover-box {
    position:relative; overflow:hidden; text-align:center;
    background:#fff; color:#333; border-radius:.6rem;
    transition: background .3s, color .3s;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.hover-box .icon-wrapper { position:relative; width:3rem; height:3rem; margin:0 auto 1rem; }
.hover-box .icon,
.hover-box .icon-back   { position:absolute; top:50%; left:50%; line-height:1; font-size:2rem; transform-origin:center; transition: transform .3s, opacity .3s; }
.hover-box .icon        { transform:translate(-50%,-50%) scale(1); z-index:2; }
.hover-box .icon-back   { transform:translate(-50%,-50%) scale(1.5); color:rgba(0,0,0,.15); opacity:0; z-index:1; }

.hover-box::before,
.hover-box::after {
    content:""; position:absolute; height:2px; width:30%; background:currentColor;
    transform:scaleX(0); transition: transform .4s;
}
.hover-box::before { top:10px;  left:10px;  transform-origin:left;  }
.hover-box::after  { bottom:10px; right:10px; transform-origin:right; }
.hover-box .divider { width:30px; height:2px; background:currentColor; border:0; margin:1rem auto; transition:width .3s; }

.hover-box:hover { background:var(--primary); color:#fff; }
.hover-box:hover .icon        { animation:bounce 1.2s ease 3; }
.hover-box:hover .icon-back   { opacity:1; animation:bounce-back 1.2s ease 3; }
.hover-box:hover::before,
.hover-box:hover::after        { transform:scaleX(1); }
.hover-box:hover .divider      { width:50px; }

/* Keyframes */
@keyframes bounce      { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.3);} }
@keyframes bounce-back { 0%,100%{transform:translate(-50%,-50%) scale(1.5);} 50%{transform:translate(-50%,-50%) scale(1.8);} }

/* ───────────────────────────────────────────────
   6. Referenzen / Lightbox
   ───────────────────────────────────────────── */
.image-card         { overflow:hidden; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.image-card img     { width:100%; display:block; }
.image-card figcaption { font-size:.8rem; color:#444; margin-top:.5rem; }

.hover-scale        { transition: transform .3s, filter .3s; }
.hover-scale:hover  { transform:scale(1.05); filter:brightness(1.1); }

/* Lightbox Buttons & Caption */
.lightbox-close,
.lightbox-nav {
    position:absolute; z-index:1051; width:2.5rem; height:2.5rem;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.6); color:#fff; border:0; cursor:pointer;
    transition: background .2s;
}
.lightbox-close        { top:1rem; right:1rem; font-size:1.5rem; border-radius:50%; }
.lightbox-nav          { top:50%; transform:translateY(-50%); font-size:1.5rem; border-radius:50%; }
.lightbox-prev         { left:1rem; }
.lightbox-next         { right:1rem; }
.lightbox-close:hover,
.lightbox-nav:hover    { background:rgba(0,0,0,.8); }

#lightboxCaption {
    position:absolute; bottom:0; left:0; width:100%; padding:.5rem 1rem;
    background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; box-sizing:border-box;
}

/* Lightbox – mobile Anpassungen */
@media (max-width:576px){
    .lightbox-close   { width:2rem; height:2rem; font-size:1.25rem; top:.75rem; right:.75rem; }
    .lightbox-nav     { width:2.5rem; height:2.5rem; font-size:1.25rem; }
    .lightbox-prev    { left:.75rem; }
    .lightbox-next    { right:.75rem; }
}

/* ───────────────────────────────────────────────
   7. Über‑uns (Hero + USP)
   ───────────────────────────────────────────── */
.about-section { position:relative; overflow:hidden; }
.about-section .hero-bg{
    position: absolute !important;
    inset: 0 !important;
    background: url('/theme/image/backgrounds/ueber-uns-hero-bg.png') center/cover no-repeat !important;
    z-index: 1 !important;
}
.about-section .overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);   /* 0.6 = 60 % Durchsicht */
    z-index: 2;
}
.about-section .container { position:relative; z-index:3; }

.usp-list li { margin-bottom:1rem; font-size:1.1rem; line-height:1.4; }

@media (max-width:767px){
    .section-title { font-size:2rem; }
}

/* ───────────────────────────────────────────────
   8. Kontakt
   ───────────────────────────────────────────── */
.contact-section { background:#f9f9f9; }
.icon-box {
    width:80px; height:80px; margin:0 auto;
    background:rgba(152,212,227,.1); color:var(--primary);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:2rem; transition: background .3s, transform .3s;
}
.icon-box:hover { background:rgba(152,212,227,.2); transform:translateY(-4px); }
.contact-section h5 {
    font-family:'Poppins',sans-serif; text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem;
}
.contact-section p  { color:#555; line-height:1.4; }

@media (max-width:767px){
    .icon-box { width:64px; height:64px; font-size:1.5rem; }
}

/* Quick‑Contact – Bild */
.contact-image-wrapper { overflow:hidden; border-radius:.5rem; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.contact-image-wrapper img { transition: transform .4s; }
.contact-image-wrapper img:hover { transform:scale(1.05); }

/* Formular */
#quick-contact .form-label    { font-weight:500; letter-spacing:.5px; }
#quick-contact .form-control  { border-radius:0; border-color:#ddd; box-shadow:none; transition:border-color .2s, box-shadow .2s; }
#quick-contact .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(152,212,227,.25); }

@media (max-width:767px){
    #quick-contact .contact-image-wrapper { margin-bottom:2rem; }
}