@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-v24-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-v24-latin-800.woff2') format('woff2')}
@font-face{font-family:'BarlowCondensed';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-v13-latin-700italic.woff2') format('woff2')}

main>div[itemtype="https://schema.org/LocalBusiness"], main>div[itemtype="https://schema.org/Organization"], main>div[itemprop=publisher], main>time, .linkItem {
    display: none !important;
    opacity: 0;
}

:root{
    --bg:#f6f5f1;
    --panel:#ffffff;
    --dark:#22302b;
    --dark2:#35423d;
    --wood:#008672;
    --wood-dark:#006654;
    --text:#35423d;
    --muted:#66716c;
    --line:#e2e0d8;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg) linear-gradient(rgba(246,245,241,.93),rgba(246,245,241,.93));
    background-image:linear-gradient(rgba(246,245,241,.93),rgba(246,245,241,.93)),url('../../images/wood-reuter.jpg');
    background-repeat:repeat;
    color:var(--text);
    font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--wood-dark)}
a:hover{color:var(--wood)}

h1,h2,h3,h4{
    font-weight:800;
    line-height:1.15;
    color:var(--dark);
    margin:0 0 16px;
    text-wrap:balance;
}
h1{font-size:clamp(1.9rem,4.5vw,2.9rem)}
h2{font-size:clamp(1.35rem,2.8vw,1.9rem)}
h3{font-size:clamp(1.1rem,2.2vw,1.35rem)}
h4{font-size:1.05rem}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.frame{
    max-width: 1552px;
    padding: 0 24px 0;
    margin: 0 auto 24px;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.grid>article{flex:1 1 100%;min-width:0}

/*
//################################
//Header / Navigation
//################################
*/
#header{
    position:sticky;
    top:0;
    z-index:90;
    background:linear-gradient(rgba(246,245,241,.92),rgba(246,245,241,.92)),url('../../images/wood-reuter.jpg') center/cover;
    border-bottom:1px solid var(--line);
    transition:transform .3s ease;
}
.scrolldown #header{transform:translateY(calc(-100% - 80px))}
.scrollup #header{transform:translateY(0)}
.openNav #header{transform:none}
#header>div{
    max-width:1552px;
    margin:0 auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    gap:24px;
}
#logo{margin:0;display:flex;align-items:center;gap:12px}
#logo a{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative}
#logo a::before{
    content:'';
    position:absolute;
    left:0;
    top:-144px;
    width:84px;
    height:150px;
    background:var(--wood);
    transform:rotate(-6deg);
    transform-origin:center 182px;
    transition:all .3s ease;
}
#logo a img{position:relative}
#logo img{
    width:84px;
    height:auto;
    margin:-14px 0 -38px;
    transform:rotate(-6deg);
    transition:width .3s ease,margin .3s ease;
}
#logo strong{
    font-family:'BarlowCondensed','Poppins',sans-serif;
    font-style:italic;
    font-weight:700;
    font-size:1.9rem;
    text-transform:uppercase;
    color:var(--wood);
    letter-spacing:.03em;
    white-space:nowrap;
}
#logo .badge{width:48px;height:auto}

#header nav{margin-left:auto}
#header nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:8px;
}
#header nav a{
    display:block;
    position:relative;
    padding:10px 16px;
    border-radius:99px;
    font-weight:400;
    color:var(--dark2);
    text-decoration:none;
    transition:color .25s ease,transform .25s ease;
}
#header nav a::after{
    content:'';
    position:absolute;
    left:16px;
    right:16px;
    bottom:4px;
    height:2px;
    border-radius:2px;
    background:var(--wood);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .3s ease;
}
#header nav a:hover{color:var(--dark);transform:translateY(-1px)}
#header nav a:hover::after{transform:scaleX(1)}
#header nav li.active a{color:var(--dark);font-weight:800}
#header nav li.active a::after{transform:scaleX(1)}

#menuToggle{
    display:none;
    margin-left:auto;
    width:48px;
    height:48px;
    border:none;
    border-radius:99px;
    background:transparent;
    cursor:pointer;
    position:relative;
    z-index:95;
    transition:transform .25s ease;
}
#menuToggle:hover{transform:scale(1.07)}
#menuToggle span{pointer-events:none}
#menuToggle span,
#menuToggle span::before,
#menuToggle span::after{
    content:'';
    position:absolute;
    left:13px;
    width:22px;
    height:2px;
    border-radius:2px;
    background:var(--dark);
    transition:transform .25s ease,opacity .25s ease,width .25s ease,background .25s ease;
}
#menuToggle span{top:23px;width:14px}
#menuToggle span::before{left:0;top:-7px}
#menuToggle span::after{left:0;top:7px;width:18px}
#menuToggle:hover span,
#menuToggle:hover span::after{width:22px}
#menuToggle.active span{background:transparent}
#menuToggle.active span::before,
#menuToggle.active span::after{background:#fff}
#menuToggle.active span::before{transform:translateY(7px) rotate(45deg)}
#menuToggle.active span::after{width:22px;transform:translateY(-7px) rotate(-45deg)}

@media (max-width:560px){
    #header>div{gap:12px}
    #logo{gap:8px}
    #logo a{gap:8px}
    #logo img{width:64px;margin:-6px 0 -20px}
    #logo a::before{left:0;top:-136px;width:64px;height:150px;transform-origin:center 170px}
    #logo strong{font-size:1.35rem}
    #logo .badge{width:36px}
}
@media (max-width:1023px){
    #menuToggle{display:block}
    #header nav{
        position:fixed;
        inset:0;
        background:var(--dark);
        background-image:linear-gradient(rgba(29,41,36,.97),rgba(29,41,36,.97)),url('../../images/wood-reuter.jpg');
        background-repeat:repeat;
        padding:96px 24px 24px;
        transform:translateX(100%);
        transition:transform .3s ease;
        z-index:92;
    }
    .openNav #header nav{transform:translateX(0)}
    .openNav{overflow:hidden}
    #header nav ul{flex-direction:column;gap:4px}
    #header nav a{font-size:1.3rem;font-weight:800;padding:14px 16px;border-radius:16px;color:rgba(255,255,255,.85)}
    #header nav a:hover{color:#fff}
    #header nav a::after{left:16px;right:auto;width:56px;bottom:8px;background:#5fc2ae}
    #header nav li.active a{color:#fff}
    #header nav li{opacity:0}
    .openNav #header nav li{animation:navIn .4s ease forwards}
    .openNav #header nav li:nth-child(1){animation-delay:.05s}
    .openNav #header nav li:nth-child(2){animation-delay:.1s}
    .openNav #header nav li:nth-child(3){animation-delay:.15s}
    .openNav #header nav li:nth-child(4){animation-delay:.2s}
    .openNav #header nav li:nth-child(5){animation-delay:.25s}
}
@keyframes navIn{
    from{opacity:0;transform:translateX(32px)}
    to{opacity:1;transform:translateX(0)}
}

/*
//################################
//Breadcrumb
//################################
*/
#breadcrumb{max-width:1552px;margin:0 auto;padding:16px 24px 0}
.breadcrumb{
    list-style:none;
    margin:0;
    padding:6px 16px;
    display:inline-flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    letter-spacing:.03em;
    color:var(--muted);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:99px;
}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.breadcrumb a:hover{color:var(--wood-dark)}
.breadcrumb li:first-child a::before{
    content:'⌂';
    margin-right:6px;
    font-size:1rem;
    line-height:1;
    color:var(--wood);
}
.breadcrumb li+li::before{content:'›';color:var(--wood);font-weight:800}
.breadcrumb li:last-child{color:var(--wood-dark);font-weight:800}

/*
//################################
//Main / Sections
//################################
*/
main{display:block}

.article header h1::after,
section.frame>header>h2::after{
    content:'';
    display:block;
    width:56px;
    height:4px;
    margin-top:14px;
    border-radius:2px;
    background:var(--wood);
}
section.frame>header{max-width:900px;margin-bottom:24px}
.article div[itemprop=articleBody]{max-width:900px}
.lead{font-size:1.1rem}

figure{margin:0}
figure img{width:100%;height:100%;object-fit:cover}
.teaser figure,
.g33 figure,
.g50 figure{
    border-radius:16px;
    overflow:hidden;
    background:var(--line);
}

/* Hero-Band mit Holzstruktur und Polaroid-Slider */
.fTop{align-items:flex-start}
.fMiddle{align-items:center}
.teaser .gridSlider{overflow:hidden;aspect-ratio:3/2}
.teaser figure{height:100%;border-radius:0;background:none}
.teaser figure img{transition:transform 4s ease}
.teaser .swiper-slide-active img{transform:scale(1.04)}

.teaserWood{
    max-width:none;
    background:#3a2c20 url('../../images/wood-reuter.jpg') center center;
    background-size:cover;
    padding-top:24px;
    padding-bottom:24px;
}
.teaserWood>.grid{max-width:1472px;margin:0 auto;width:100%}
.teaserWood #breadcrumb{padding:0;max-width:1472px;margin:0 auto 16px;width:100%}
.teaserWood .breadcrumb{
    background:rgba(20,15,10,.35);
    border-color:rgba(255,255,255,.22);
}
.teaserWood .breadcrumb,
.teaserWood .breadcrumb a{color:rgba(255,255,255,.8)}
.teaserWood .breadcrumb a:hover{color:#fff}
.teaserWood .breadcrumb li:first-child a::before{color:#5fc2ae}
.teaserWood .breadcrumb li+li::before{color:#5fc2ae}
.teaserWood .breadcrumb li:last-child{color:#fff}
.bandText{color:#fff}
.bandText p{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.bandText .badge{width:64px;height:auto;margin-bottom:12px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.bandTitle{
    font-weight:800;
    font-size:clamp(1.6rem,3.5vw,2.4rem);
    line-height:1.15;
    margin-bottom:16px;
}

.polaroid{position:relative;padding:8px}
.polaroid::before{
    content:'';
    position:absolute;
    inset:16px 4px 0 12px;
    background:#f3efe8;
    border-radius:4px;
    transform:rotate(-3deg);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.polaroid .gridSlider{
    position:relative;
    background:#fff;
    padding:12px 12px 44px;
    border-radius:4px;
    transform:rotate(2deg);
    box-shadow:0 18px 45px rgba(0,0,0,.45);
}
.polaroid .swiper-wrapper{border-radius:2px;overflow:hidden}
.teaserWood .slider_controll{bottom:14px}
.teaserWood .slider_dots .swiper-pagination-bullet{background:rgba(34,48,43,.25)}
.teaserWood .slider_dots .swiper-pagination-bullet-active{background:var(--wood)}

/* Kachel-Karten (Leistungen, Arbeit im Wandel) */
.grid.cards.fTop{align-items:stretch}
.grid.cards>article{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
}
.grid.cards h2,.grid.cards h3{
    margin-bottom:8px;
    font-size:1.25rem;
    overflow-wrap:break-word;
}
.grid.cards ul{
    list-style:none;
    margin:0;
    padding:0;
}
.grid.cards li{padding-left:20px;position:relative}
.grid.cards li::before{
    content:'–';
    position:absolute;
    left:0;
    color:var(--wood);
    font-weight:800;
}

/* Galerien */
.g33 figure,.g25 figure{aspect-ratio:3/2}
.g25 figure.contain,.g20 figure.contain{
    aspect-ratio:3/4;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}
figure.contain img{object-fit:contain}
.grid a{display:block}
.grid a figure{transition:box-shadow .25s ease}
.grid a:hover figure{box-shadow:0 8px 28px rgba(34,48,43,.18)}
.grid a figure img{transition:transform .35s ease}
.grid a:hover figure img{transform:scale(1.04)}

/* Referenz-Kategorien */
.refCat{
    border-top:1px solid var(--line);
    padding-top:24px;
}
.refCat .grid figure{
    aspect-ratio:auto;
    background:#fff;
    padding:10px;
    border-radius:4px;
    overflow:visible;
    box-shadow:0 5px 14px rgba(34,48,43,.13);
    transition:transform .3s ease,box-shadow .3s ease;
}
.refCat .grid figure img{
    aspect-ratio:3/2;
    height:auto;
    object-fit:cover;
    border-radius:2px;
}
.refCat .grid article:nth-child(5n+1) figure{transform:rotate(-1.6deg)}
.refCat .grid article:nth-child(5n+2) figure{transform:rotate(1.3deg)}
.refCat .grid article:nth-child(5n+3) figure{transform:rotate(-.9deg)}
.refCat .grid article:nth-child(5n+4) figure{transform:rotate(1.8deg)}
.refCat .grid article:nth-child(5n+5) figure{transform:rotate(-1.2deg)}
.refCat .grid a:hover figure{
    transform:rotate(0) translateY(-6px);
    box-shadow:0 10px 22px rgba(34,48,43,.18);
}
.refCat .grid a:hover figure img{transform:none}
.refCat>header h2::after{display:none}
.refCat>header h2{margin-bottom:8px}
.refCat>header .cat{
    display:inline-block;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--wood-dark);
    margin-bottom:8px;
}
.pdfLink{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    text-decoration:none;
    color:var(--wood-dark);
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:99px;
    padding:8px 16px;
    margin-top:8px;
}
.pdfLink::before{content:'📄'}
.pdfLink:hover{border-color:var(--wood)}

/* Kontakt-Karte */
.contactCard{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
}
.contactCard a{font-weight:800;text-decoration:none;font-size:1.15rem}
.contactCard .label{
    display:block;
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
}

/* Impressum / Datenschutz */
.legal div[itemprop=articleBody]{max-width:900px}
.legal h2{margin-top:32px}
.legal h3{margin-top:24px}

/*
//################################
//Footer
//################################
*/
footer{
    background:var(--dark);
    background-image:linear-gradient(rgba(29,41,36,.97),rgba(29,41,36,.97)),url('../../images/wood-reuter.jpg');
    background-repeat:repeat;
    color:#cdd6d1;
    margin-top:48px;
}
footer .frame{
    margin-bottom:0;
    padding-top:24px;
    padding-bottom:24px;
}
footer h2{color:#fff;font-size:1.1rem}
footer p{margin:0 0 8px}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--wood);text-decoration:underline}
footer .grid>article{flex:1 1 240px}
footer .fLegal{
    position:relative;
    font-size:.85rem;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
    justify-content:space-between;
}
footer .fLegal::before{
    content:'';
    position:absolute;
    top:0;
    left:24px;
    right:24px;
    height:1px;
    background:rgba(255,255,255,.12);
}
footer .badge{width:56px;height:auto}
footer .fBrand{
    display:flex;
    align-items:center;
    gap:16px;
    flex:0 0 auto;
}
footer .fLogo{width:64px;height:auto}

/*
//################################
//Swiper Basis
//################################
*/
.gridSlider{position:relative;overflow:hidden}
.swiper-wrapper{
    display:flex;
    width:100%;
    height:100%;
    position:relative;
    transition-property:transform;
    box-sizing:content-box;
}
.swiper-slide{flex-shrink:0;position:relative;width:100%}
.slider_controll{
    position:absolute;
    left:0;
    right:0;
    bottom:12px;
    z-index:5;
    display:flex;
    justify-content:center;
}
.slider_dots{display:flex;gap:8px}
.slider_dots .swiper-pagination-bullet{
    width:10px;
    height:10px;
    border-radius:99px;
    background:rgba(255,255,255,.55);
    cursor:pointer;
    transition:width .25s ease,background .25s ease;
}
.slider_dots .swiper-pagination-bullet-active{width:28px;background:#fff}

/*
//################################
//Lightbox
//################################
*/
.lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(15,22,19,.9);
    display:flex;
    align-items:center;
    justify-content:center;
}
.ovlimg{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:24px;
}
.ovlimg-content{
    max-width:min(1200px,92vw);
    max-height:84vh;
    object-fit:contain;
    border-radius:8px;
}
.lightbox-title{color:#fff;margin:12px 0 0}
.lightbox .close,
.lightbox .prev,
.lightbox .next{
    position:absolute;
    color:#fff;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    user-select:none;
    padding:12px;
    text-decoration:none;
}
.lightbox .close{top:16px;right:24px;font-size:2.4rem}
.lightbox .prev{left:12px;top:50%;transform:translateY(-50%)}
.lightbox .next{right:12px;top:50%;transform:translateY(-50%)}

/*
//################################
//Ansicht Tablet
//################################
*/
@media (min-width: 767px) {
    .grid.g50>article{flex:1 1 calc(50% - 12px)}
    .grid.g33>article{flex:1 1 calc(50% - 12px)}
    .refCat .grid.g33>article{max-width:calc(50% - 12px)}
    .grid.g25>article{flex:1 1 calc(33.333% - 16px)}
    .grid.g20>article{flex:1 1 calc(33.333% - 16px)}
}

/*
//################################
//Ansicht Desktop
//################################
*/
@media (min-width: 1024px){
    .frame{
        padding: 0 40px 0;
        margin-bottom: 40px;
    }
    .flex{
        gap: 40px;
    }
    #header>div{padding:16px 40px}
    #breadcrumb{padding:24px 40px 0}
    .teaserWood{padding-top:48px;padding-bottom:48px}
    .polaroid{padding:16px}
    section.frame>header{margin-bottom:40px}
    .refCat{padding-top:40px}
    footer .frame{padding-top:40px;padding-bottom:40px}
    footer .fLegal::before{left:40px;right:40px}
    footer{margin-top:80px}
    .grid.cards>article{padding:40px}
    .contactCard{padding:40px}
    .grid.g50>article{flex:1 1 calc(50% - 20px)}
    .grid.g33>article{flex:1 1 calc(33.333% - 27px)}
    .refCat .grid.g33>article{max-width:calc(50% - 20px)}
    .grid.g25>article{flex:1 1 calc(25% - 30px)}
    .grid.g20>article{flex:1 1 calc(20% - 32px)}
    .slider_controll{bottom:20px}
}

/*
//################################
//Ansicht Nav Small
//################################
*/
@media (min-width: 1460px) {
    #header nav a{padding:10px 22px}
}