:root{
    --red-main: #C81010;
    --red-highlight: #E53935;
    --anthrazit: #3F4648;
    --gray: #6E7376;
    --blue: #0B4A8B;
    --black: #1E1E1E;
    --white: #FFFFFF;
    --max-width: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;color:var(--anthrazit);background:var(--white);}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* Header */
.site-header{border-bottom:1px solid #eee;background:#fff;position:fixed;top:0;left:0;right:0;z-index:9999}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0;line-height:1}
.logo, #logo .logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--anthrazit); }
.header-inner .logo { align-items: center; }


.header-inner .logo img{
  height:auto;
  width:auto;

  /* +10% */
  max-width: clamp(132px, 19.8vw, 242px);
  max-height: clamp(44px, 8.8vh, 79px);

  display:block;
  margin:0 !important;
  flex:0 0 auto;
  align-self:center;
  object-fit:contain;
}


/* keep nav centered vertically while logo is aligned to top */
.main-nav{align-self:center}
.logo-mark{display:none}
.brand{display:none}
.brand strong{color:var(--anthrazit);font-size:1.2rem}
.brand .gmbh{display:block;font-size:0.78rem;color:var(--gray);margin-top:2px}

/* Dachlinie (kleines grafisches Element über dem Logo) */
.logo-mark svg .roof{fill:var(--red-main)}
.logo-mark svg .roof-highlight{fill:var(--red-highlight);opacity:0.85}
.logo-mark svg .tool-stroke{stroke:var(--black);stroke-width:1}

/* Werkzeugsymbol als Kreis */
.tool-circle{display:none}
#navToggle{display:none;background:none;border:0;font-size:1.4rem}
.main-nav a{margin-left:18px;text-decoration:none;color:var(--anthrazit);font-weight:600;position:relative;display:inline-block;transition:color .22s ease, transform .12s ease}
.main-nav a:active{transform:translateY(0)}
.main-nav a:focus{outline:none}

/* Animated underline and subtle lift on hover/focus */
.main-nav a::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) scaleX(0);transform-origin:center center;width:56%;height:4px;background:var(--red-main);border-radius:3px;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .18s ease;opacity:0}
.main-nav a:hover, .main-nav a:focus{color:var(--red-main);transform:translateY(-3px)}
.main-nav a:hover::after, .main-nav a:focus::after{transform:translateX(-50%) scaleX(1);opacity:1}

/* focus-visible for keyboard users */
.main-nav a:focus-visible{box-shadow:0 0 0 4px rgba(11,74,139,0.08);border-radius:6px}

@media (prefers-reduced-motion: reduce){
    .main-nav a, .main-nav a::after{transition:none}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--white),#fafafa);padding:12px 0 24px;text-align:center}
.hero h1{font-size:2.2rem;color:var(--anthrazit);margin:0}
.lead{color:var(--gray);margin:8px 0 18px}
.btn{display:inline-block;padding:10px 18px;border-radius:6px;text-decoration:none}
.btn.primary{background:linear-gradient(180deg,var(--red-main),var(--red-highlight));color:#fff;border:0;box-shadow:0 6px 18px rgba(200,16,16,0.12)}
.btn.primary:hover{transform:translateY(-1px)}

/* Accent underlines for headings */
.section h2{position:relative;padding-bottom:8px}
.section h2:after{content:"";display:block;height:4px;width:60px;background:var(--red-main);border-radius:4px;margin-top:8px}

/* Sections */
.section{padding:48px 0;border-bottom:1px solid #f0f0f0}
.section h2{color:var(--black);margin:0 0 8px}
.muted{color:var(--gray)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:18px}
.card{padding:18px;border:1px solid #eee;border-radius:8px;background:#fff}

.projects .container{display:block}
.project{position:relative;overflow:hidden;border-radius:10px;min-height:220px;background:#fff;border:1px solid #eee;display:flex;flex-direction:column;justify-content:flex-end}
.project .project-gallery{display:none}
.project .project-cover{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(1.08) contrast(1.05);}
.project .project-info{position:relative;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.06));color:var(--white);backdrop-filter: blur(0px)}
.project h3{margin:0;color:var(--white);font-size:1.05rem}
.project .count{font-size:0.9rem;color:rgba(255,255,255,0.9);opacity:0.95}
.project::after{content:'';position:absolute;inset:0;box-shadow:inset 0 -40px 60px rgba(0,0,0,0.2);pointer-events:none}

/* Thumbnail strip inside project tile */
.project .thumbs{display:flex;gap:6px;padding:10px 12px 16px;align-items:center}
.project .thumbs img{width:calc((100% - 12px)/3);height:64px;object-fit:cover;border-radius:6px;border:2px solid rgba(255,255,255,0.12);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.project .thumbs img:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.18)}
.project .thumbs .more{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);color:#fff;border-radius:6px;width:64px;height:64px;font-weight:600}

/* Lightbox navigation */
.lb-nav{position:absolute;top:50%;left:0;right:0;display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.lb-btn{pointer-events:auto;background:rgba(0,0,0,0.45);color:#fff;border:0;padding:10px 14px;border-radius:6px;margin:0 8px}
.lb-btn:focus{outline:2px solid var(--red-main)}


/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.gallery figure{margin:0;cursor:pointer;background:#fff;border-radius:6px;overflow:hidden;border:1px solid #eee}
.gallery img{width:100%;height:140px;object-fit:cover;display:block}
.gallery figcaption{padding:8px;font-size:.9rem;color:var(--gray)}

/* partners */
.partners-grid{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.partner img{height:54px;object-fit:contain;display:block}

/* Leistungen / services */
.services-grid{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.services-grid .span2{flex:1 1 280px}
.listWithMarker{padding-left:18px;margin:0}
.listWithMarker li{margin-bottom:8px;color:var(--anthrazit);font-weight:600}

/* Ensure the list items are non-interactive (not links) */
.listWithMarker li a{pointer-events:none;text-decoration:none;color:inherit}

/* Ensure partner logos are visually consistent */
.partners-grid .partner{display:flex;align-items:center;justify-content:center;padding:8px}
.partners-grid .partner img{height:64px;max-height:64px;width:auto;max-width:100%;object-fit:contain;display:block}
.partners-intro{margin-bottom:12px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form label{display:block;margin-bottom:8px}
input,textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px}

/* Footer */
.site-footer{padding:18px 0;background:#fff;border-top:1px solid #eee}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.site-footer a{color:var(--gray);text-decoration:none}

/* Map embed under contact */
.map-wrap{margin:16px 0 24px;border-radius:8px;overflow:hidden;border:1px solid #eee}
.map-embed{width:100%;height:360px;border:0;display:block}
@media (max-width:720px){
    .map-embed{height:220px}
}

/* Footer Facebook icon centered between left and right items */
.footer-inner .footer-fb{margin:0 auto;display:inline-flex;align-items:center;justify-content:center}
.footer-fb svg{width:28px;height:28px;display:block}

/* Impressum modal logo */
.impressum-logo{display:block;margin:0 auto 14px;max-width:300px;width:300px;height:auto}

/* Override generic lightbox image rule for the Impressum logo so it doesn't expand to container width */
#impressumModal .lb-content img.impressum-logo {
    max-width:300px !important;
    width:300px !important;
    height:auto !important;
    display:block;
    margin:0 auto 14px !important;
}

/* Cookie banner */
.cookie-banner{
    position:fixed;
    left:18px;
    right:18px;
    bottom:18px;
    z-index:10030;
    max-width:1100px;
    margin:0 auto;
    background:var(--surface, #ffffff);
    color:var(--text, #111);
    box-shadow:0 10px 24px rgba(0,0,0,0.18);
    border-radius:10px;
    border:1px solid var(--gray); /* visible border around the cookie warning */
    padding:12px 14px;
    transform:translateY(140%);
    opacity:0;
    transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
    display:flex;
    align-items:center;
}
.cookie-banner.show{transform:translateY(0);opacity:1;}
.cookie-inner{display:flex;gap:12px;align-items:center;width:100%}
.cookie-inner p{margin:0;flex:1;font-size:0.95rem;line-height:1.3}
.cookie-actions{display:flex;gap:8px;align-items:center}
.cookie-more{color:var(--accent, #0073e6);text-decoration:none;font-size:0.92rem}

/* Make cookie buttons visually identical and match primary CTA look */
.cookie-banner .btn, .cookie-banner .btn-ghost{
    padding:8px 12px;border-radius:6px;border:0;background:var(--anthrazit);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.cookie-banner .btn:hover, .cookie-banner .btn-ghost:hover{transform:translateY(-1px);filter:brightness(1.06)}

@media (max-width:720px){
    .cookie-banner{left:12px;right:12px;padding:10px}
    .cookie-inner{flex-direction:column;align-items:flex-start}
    .cookie-actions{width:100%;justify-content:flex-end}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;padding:18px}
.lightbox.active{display:flex}
.lb-content{max-width:90%;max-height:90%}
.lb-content img, .lb-content video{max-width:100%;max-height:80vh;border-radius:6px}
.lb-close{position:absolute;right:18px;top:18px;background:transparent;color:#fff;border:0;font-size:1.6rem}

/* Impressum modal overrides */
#impressumModal{
    background:rgba(0,0,0,0.86);
    z-index:10001; /* ensure modal is above fixed header (header z-index:9999) */
    align-items:flex-start; /* push modal content toward top so it sits below header */
    padding-top:84px; /* adjusted for reduced header padding */
}

#impressumModal .lb-content{
    background:#fff;
    color:var(--anthrazit);
    max-width:var(--max-width);
    width:calc(100% - 32px);
    padding:28px 28px 36px;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,0.45);
    position:relative;
    max-height:calc(100vh - 120px);
    overflow:auto;
    border:4px solid transparent; /* base border so hover/active can change color */
    transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
#impressumModal .lb-content h2, #impressumModal .lb-content h3{color:var(--black);margin:0 0 8px}
#impressumModal .lb-content h2:after{content:"";display:block;height:4px;width:60px;background:var(--red-main);border-radius:4px;margin-top:8px}
#impressumModal .lb-content p{color:var(--anthrazit);line-height:1.45}
#impressumModal .lb-close{position:absolute;top:12px;right:12px;background:transparent;color:var(--anthrazit);font-size:1.4rem;border:0;cursor:pointer}

/* When the modal is active, emphasize it with the same red border and subtle red shadow used on tile hover */
#impressumModal.active .lb-content{
    border-color:var(--red-main);
    box-shadow:0 20px 60px rgba(200,16,16,0.12);
    transform:translateY(-4px);
}

/* small visual polish */
.project h3{display:flex;align-items:center;gap:10px}
.project-gallery figure{transition:transform .18s ease, box-shadow .18s ease;border:0}
.project-gallery figure:focus, .project-gallery figure:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.08)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Floating background layers */
.bg-float{position:fixed;pointer-events:none;z-index:5;will-change:transform;opacity:.18;background-position:center center;background-size:cover;filter:grayscale(.05) saturate(.9);}
.bg-1{left:5%;top:10%;width:420px;height:300px;transform:translate3d(0,0,0)}
.bg-2{right:6%;top:30%;width:520px;height:360px;transform:translate3d(0,0,0)}
.bg-3{left:14%;bottom:6%;width:680px;height:420px;transform:translate3d(0,0,0)}

@media (max-width:900px){
    .bg-1,.bg-2,.bg-3{display:none}
}

/* Reveal on scroll animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .62s cubic-bezier(.2,.9,.3,1), transform .62s cubic-bezier(.2,.9,.3,1);will-change:transform,opacity}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* Hero entrance (staggered) */
.hero .intro-text > *{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.hero.loaded .intro-text > *{opacity:1;transform:none}
.hero.loaded .intro-text > *:nth-child(1){transition-delay:.06s}
.hero.loaded .intro-text > *:nth-child(2){transition-delay:.12s}
.hero.loaded .intro-text > *:nth-child(3){transition-delay:.18s}
.hero.loaded .intro-text > *:nth-child(4){transition-delay:.24s}
.hero.loaded .intro-text > *:nth-child(5){transition-delay:.3s}

/* Subtle pulse for primary CTA on load */
@keyframes pulse-soft{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
.btn.primary.pulse{animation: pulse-soft 2.8s ease-in-out 1;}

/* Longer, slower header pulse for a more persistent effect */
@keyframes slow-pulse{
    0%{transform:translateY(0) scale(1);box-shadow:0 4px 12px rgba(200,16,16,0.04)}
    50%{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 50px rgba(200,16,16,0.12)}
    100%{transform:translateY(0) scale(1);box-shadow:0 4px 12px rgba(200,16,16,0.04)}
}

@media (prefers-reduced-motion: reduce){
    .site-header.pulse-long{animation:none!important}
}

/* Partner hover polish */
.partners-grid .partner img{transition:transform .28s cubic-bezier(.2,.9,.3,1),filter .28s ease}
.partners-grid .partner:hover img{transform:translateY(-6px) scale(1.06);filter:grayscale(0)}

/* Project thumbnail tilt on hover */
.project .thumbs img{transition:transform .22s ease, box-shadow .22s ease}
.project .thumbs img:hover{transform:translateY(-6px) rotate(-1.2deg) scale(1.03)}

@media (prefers-reduced-motion: reduce){
    .reveal, .hero .intro-text > *, .btn.primary.pulse, .partners-grid .partner img, .project .thumbs img{transition:none!important;animation:none!important;transform:none!important}
}

/* Random project background used for subtle parallax */
.bg-float.random-bg{
    position:fixed;
    left:0;right:0;top:0;
    width:100vw;height:100vh;
    transform:none;
    z-index:4;
    opacity:0.12;
    border-radius:0; /* span full width */
    background-position:center center;
    background-size:cover;
    filter:grayscale(.02) saturate(.9);
    pointer-events:none;
}
@media (max-width:900px){
    .bg-float.random-bg{display:none}
}

/* Projects grid: explicit 3-column layout for the generated folder-based galleries */
.projects .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
}
.projects .project { background: var(--white); border-radius: 6px; padding: 1rem; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.projects .project h3 { margin: 0 0 0.5rem 0; font-size: 1.05rem; color: var(--anthrazit) }
.projects .project .project-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem }
.projects .project figure img { width: 100%; height: 120px; object-fit: cover; border-radius:4px }

/* embedded video styling */
.project-video .embedded-video { width: 100%; height: auto; max-height: 520px; background:#000; border-radius:6px }

@media (max-width: 900px) {
    .projects .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .projects .projects-grid { grid-template-columns: 1fr; }
    .projects .project .project-gallery { grid-template-columns: 1fr 1fr }
}

/* Fix: Keep project tiles compact and show only a thumbnail row */
.projects .project {
    height: 280px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.projects .project .project-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    max-height: 132px;
    overflow: hidden;
    margin-top: .5rem;
}
.projects .project .project-gallery figure { margin: 0; }
.projects .project .project-gallery img { width:100%; height: 100px; object-fit: cover; border-radius:4px }
.projects .project .project-info{position:relative;padding:12px;background:linear-gradient(180deg,rgba(0,0,0,0.0),rgba(0,0,0,0.06));color:var(--white);}

@media (max-width:900px){
    .projects .project { height: auto; min-height: 200px }
    .projects .project .project-gallery { max-height: 200px }
}

    /* Hero intro: left-align paragraphs while keeping hero centered */
    .hero .intro-text{
        text-align:left;
        /* match the container width used by other sections */
        max-width: none;
        width:100%;
        margin:0;
        padding:0;
    }

    /* Reuse the section heading appearance for the welcome title */
    .section-title{color:var(--black);margin:0 0 8px}
    .section-title:after{content:"";display:block;height:4px;width:60px;background:var(--red-main);border-radius:4px;margin-top:8px}

/* Center only the hero's tagline line */
.hero .intro-text > .lead { 
    text-align:center;
    margin:0.25rem auto 0.9rem;
    font-weight:600;
}

/* Hover zoom + red border (same color as section underline) for cards and project tiles */
.card, .projects .project, .gallery figure, .project-gallery figure {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
}
.card:hover, .projects .project:hover, .gallery figure:hover, .project-gallery figure:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 30px rgba(200,16,16,0.12);
    border-color: var(--red-main);
}

/* Ensure default borders exist so hover border-color is visible */
.card{border:1px solid #eee}
.gallery figure{border:1px solid #eee}
.project-gallery figure{border:0}

/* Force the logo to keep its intrinsic proportions even if other rules conflict */
.site-header .header-inner > .logo img {
    width: auto !important;
    height: auto !important;
    max-width: clamp(120px,18vw,220px) !important; /* responsive clamp (slimmer) */
    max-height: clamp(40px,8vh,72px) !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important; /* remove extra top/bottom margin for slim header */
}

/* FORCE: Header-Logo +10% (Override ganz am Ende der CSS-Datei) */
.site-header .header-inner > a.logo > img {
  max-width: 300px !important;  /* 220px * 1.1 */
  max-height: 120px !important;  /* 72px  * 1.1 */
  width: auto !important;
  height: auto !important;
}

@media (max-width: 800px){
  .site-header .header-inner > a.logo > img{
    max-height: 79px !important;
  }
}

/* Verhindert horizontalen "Jump", wenn die Scrollbar ein/aus blendet */
html{
  scrollbar-gutter: stable;
}