/* =====================================================================
   Let's design – modern rebuild (Bootstrap 5.3)
   ===================================================================== */

/* ---------- Fonts (lokal, self-hosted) ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/montserrat-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/montserrat-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/montserrat-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/roboto-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/roboto-latin-900-normal.woff2') format('woff2')}

/* ---------- Design-Tokens ---------- */
:root{
  --blue:#2283d4;
  --blue-dark:#186986;
  --light-blue:#a9dee2;
  --yellow:#fdd947;
  --red:#e31d3b;
  --ink:#000;
  --text:#727272;
  --muted:#9b9b9b;
  --gray:#f6f6f6;
  --dark-gray:#252525;
  --ff-base:'Roboto',sans-serif;
  --ff-alt:'Montserrat',sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth}
body{font-family:var(--ff-base);font-weight:400;color:#828282;font-size:14px;line-height:24px}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-alt);color:#000}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
img{max-width:100%}
section{padding:80px 0}

/* ---------- Theme-Utilities (Werte aus dem Original) ---------- */
.alt-font{font-family:var(--ff-alt)!important;font-weight:500}
.black-text{color:#000!important}
.bg-white{background:#fff!important}
.bg-gray{background-color:#f6f6f6!important}
.bg-light-gray{background:#f7f7f7!important}
.bg-dark-gray{background:#252525!important}
.display-block{display:block!important}
.text-transform-none{text-transform:none!important}
.letter-spacing-1{letter-spacing:1px!important}
.letter-spacing-2{letter-spacing:2px!important}
.font-weight-600{font-weight:600!important}
.font-weight-700{font-weight:700!important}

.text-small{font-size:11px!important;line-height:20px!important;display:inline-block!important}
.text-medium{font-size:14px!important;line-height:24px!important}
.text-large{font-size:15px!important;line-height:22px!important}
.text-extra-large{font-size:18px!important;line-height:27px!important}
.title-small{font-size:20px!important;line-height:30px!important}
.title-medium{font-size:24px!important;line-height:28px!important}
.title-large{font-size:28px!important;line-height:34px!important}
.sm-title-medium{font-size:24px!important;line-height:28px!important}

/* spacing scale (prozentbasiert wie im Original) */
.padding-one{padding:1%!important}
.padding-four{padding:2.5%!important}
.padding-nine{padding:5%!important}
.padding-eleven{padding:6%!important}
.padding-nineteen{padding:10%!important}
.no-padding-lr{padding-left:0!important;padding-right:0!important}
.no-padding-top{padding-top:0!important}
.no-padding-bottom{padding-bottom:0!important}
.no-padding-tb{padding-top:0!important;padding-bottom:0!important}
.margin-one{margin:1%!important}
.margin-five{margin:3%!important}
.margin-seven{margin:4%!important}
.margin-thirteen{margin:7%!important}
.no-margin-lr{margin-left:0!important;margin-right:0!important}
.no-margin-top{margin-top:0!important}
.no-margin-bottom{margin-bottom:0!important}

/* accent underline + borders */
.title-thick-underline{border-bottom:6px solid #000;padding:0 0 15px 0}
.border-color-light-blue{border-color:#a9dee2!important}
.border-blue{border-color:#2283d4!important}
.img-border{border:8px solid var(--yellow);height:calc(100% - 40px);width:calc(100% - 40px);left:20px;top:20px;position:absolute}

/* testimonial */
.testimonial-style1 p{font-size:13px;margin:30px 0 20px;line-height:22px;color:#828282}
.testimonial-style1 .name{font-size:11px;display:block;width:100%;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#828282}
.testimonial-style1 img{border-radius:50%;max-width:120px}
.first-letter:first-letter{color:#000;float:left;font-size:50px;line-height:1;margin:0 20px 10px 0;position:relative;top:4px}
.st{color:var(--blue)}

/* ---------- Hero ---------- */
.hero{padding:14% 0 11%;text-align:center}
.hero .claim{font-size:18px;line-height:27px}
.hero .accent-bar{width:80px;height:0;border-bottom:6px solid var(--light-blue);margin:25px auto 0}

/* ---------- Offcanvas-Menü (ersetzt Pull-Menu) ---------- */
.menu-toggle{position:fixed;z-index:1031;top:24px;left:28px;width:44px;height:40px;border:none;background:transparent;padding:8px 6px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:#000;margin:6px 0;transition:.3s}
.menu-toggle:hover span{background:var(--blue)}
.site-menu{width:245px}
.site-menu .offcanvas-body{padding:40px 30px}
.site-menu .nav-link{font-family:var(--ff-alt);font-size:14px;color:#727272;font-weight:600;padding:12px 0}
.site-menu .nav-link span{color:#a9a9a9;margin-right:10px}
.site-menu .nav-link:hover,.site-menu .nav-link.active{color:#000}
.site-menu .nav-link.active span{color:var(--red)}
.site-menu .menu-social{margin-top:30px}
.site-menu .menu-social a{margin:0 12px 0 0;font-size:16px;color:#575757}
.site-menu .menu-social a:hover{color:var(--blue)}

/* ---------- Portfolio: CSS-Grid + Filter ---------- */
.portfolio-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;list-style:none;padding:0;margin:0 0 35px}
.filter-btn{font-family:var(--ff-alt);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#9b9b9b;background:transparent;border:none;border-radius:0;padding:5px 12px 4px;cursor:pointer;transition:.2s}
.filter-btn:hover,.filter-btn.active{background-color:var(--blue-dark);color:#fff}

.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.p-card{position:relative;overflow:hidden;background:#000;margin:0;border:none;padding:0;display:block;width:100%}
.p-card img{display:block;width:100%;height:auto;cursor:pointer;transition:transform .3s ease,opacity .3s ease}
/* Hover wie Original: Bild skaliert + verdunkelt (opacity .15 ueber schwarzem Tile) + Zoom-Cursor */
.p-card:hover img{transform:scale(1.1);opacity:.15;cursor:url("../images/icon-zoom-white.png") 23 22, pointer}
.p-card figcaption{position:absolute;left:0;right:0;bottom:28%;opacity:0;transition:opacity .3s ease;text-align:center;padding:0 15px;pointer-events:none}
.p-card:hover figcaption{opacity:1}
.p-card figcaption h3{margin:0;color:#fff;font-size:14px;line-height:24px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.p-card figcaption h3 span{display:block!important;color:#fff;font-size:11px;letter-spacing:2px;margin-top:5px;text-transform:uppercase}
.p-card.is-hidden{display:none}

@media (max-width:1199px){.portfolio-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:991px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.portfolio-grid{grid-template-columns:1fr}}

/* ---------- Modal (Projekt-Details) ---------- */
.project-modal .modal-body{padding:40px}
.project-modal .modal-content{border:none;border-radius:0;position:relative}
.project-modal section{padding:0}
.project-modal .container{max-width:none;padding-left:0;padding-right:0}
.project-modal hr{margin:24px 0}
.project-modal .ratio iframe{border:0}
.project-modal img{height:auto}

/* Swiper in Modal */
.project-modal .swiper{width:100%}
.project-modal .swiper-button-next,.project-modal .swiper-button-prev{color:#fff}
.modal-swiper .swiper-slide{cursor:url("../images/icon-move-light.png") 18 18, move}

/* Schließen-Button: schwarzes Viereck, weißes X, oben rechts */
.project-modal .btn-close{position:absolute;top:14px;right:14px;z-index:5;width:2rem;height:2rem;padding:0;margin:0;opacity:1;border-radius:0;background-color:#000;background-repeat:no-repeat;background-position:center;background-size:.8em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")}
.project-modal .btn-close:hover{background-color:#2283d4;opacity:1}

/* ---------- Reveal-Animation (IntersectionObserver, ersetzt wow.js) ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Kontakt ---------- */
#contact .label{font-family:var(--ff-alt);text-transform:uppercase;font-weight:700;color:#000;letter-spacing:1px}

/* ---------- Footer ---------- */
footer{background-color:#f6f6f6;padding:40px 0}
.footer-social a{margin:0 18px;display:inline-block;font-size:22px;color:#575757}
.footer-social a:first-child{margin-left:0}
.footer-social a:hover{color:var(--blue)}
.footer-copy{font-family:var(--ff-alt);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#727272}

/* ---------- Scroll to top ---------- */
.scrollToTop{display:none;position:fixed;right:35px;bottom:30px;z-index:1030;width:42px;height:42px;line-height:42px;text-align:center;background:var(--blue);color:#fff;border-radius:2px}
.scrollToTop:hover{opacity:.6;color:#fff}

/* ---------- Masonry-Galerie in Popups (column-based, wie Original .gal) ---------- */
.gal{column-count:3}
.gal-2{column-count:2}
.gal img,.gal-2 img{width:100%;padding:7px 0;break-inside:avoid}
@media (max-width:500px){.gal,.gal-2{column-count:1}}

/* ---------- Responsive Theme-Varianten ---------- */
@media (max-width:1199px){
  .md-margin-five{margin:3%!important}
  .md-no-margin-lr{margin-left:0!important;margin-right:0!important}
  .md-no-margin-bottom{margin-bottom:0!important}
}
@media (max-width:991px){
  .sm-margin-ten{margin:5.5%!important}
  .sm-margin-bottom-ten{margin-bottom:5.5%!important}
  .sm-no-margin-lr{margin-left:0!important;margin-right:0!important}
  .sm-no-margin-top{margin-top:0!important}
}
@media (max-width:767px){
  .xs-margin-five{margin:3%!important}
  .xs-margin-one-half{margin:.5%!important}
  .xs-no-margin-lr{margin-left:0!important;margin-right:0!important}
  .xs-no-margin-top{margin-top:0!important}
  .xs-no-margin-bottom{margin-bottom:0!important}
  .xs-no-margin-right{margin-right:0!important}
  .xs-text-center{text-align:center!important}
  .hero{padding:22% 0 16%}
}