/* =========================
   DESIGN TOKENS
========================= */
:root{
    --bg: #ffffff;
    --ink: #2b1b12;         /* Fließtext */
    --brown: #6a3412;       /* Akzent/Balken */
    --brown-2:#4a2a16;      /* leicht dunkler */
    --muted:#3b261a;

    --container: 1100px;
    --pad-x: 4%;
    --gap-lg: 80px;
    --gap-md: 60px;
    --gap-sm: 30px;

    --bar-pad: 28px;
    --bar-mb: 55px;

    --fs-body: 14px;   /* vorher 12px */
    --lh-body: 1.85;   /* leicht mehr Luft */

    --fs-small: 13px;  /* vorher 11px */
    --lh-small: 1.75;

    --fs-nav: 14px;

    --bp: 900px;
}

html {
    scroll-behavior: smooth;
}


*{ box-sizing:border-box; }
body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

/* Container */
.container{
    width: var(--container);
    max-width: calc(100% - (var(--pad-x) * 2));
    margin: 0 auto;
}

/* Einheitlicher Text */
p, li{
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
}
a{ color: var(--brown); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Einheitliche Section-Abstände */
.section{
    padding: 70px 0 95px;
}

/* Einheitlicher brauner Balken */
.bar{
    background: var(--brown);
    color:#fff;
    text-align:center;
    font-weight:700;
    letter-spacing:2px;
    padding: var(--bar-pad) 10px;
    margin: 0 auto var(--bar-mb);
}

/* 2-Spalten Grundlayout */
.grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items:start;
}

/* Links/rechts Layout mit schmaler linker Spalte (Jobs/Downloads) */
.grid-left-narrow{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 70px;
    align-items:start;
}

/* Graue Infobox */
.box{
    background:#e7e7e7;
    padding: 26px 30px;
}

/* Typo-Helpers */
.kicker{
    margin:0 0 6px;
    font-style: italic;
    letter-spacing:2px;
    color: var(--brown);
}
.title{
    margin:0;
    font-weight:800;
    letter-spacing:2px;
    color: var(--brown);
}
.text{
    margin:0 0 18px;
}

/* =========================
   HEADER
========================= */
.header{
    text-align:center;
    padding: 40px 0 10px;
}

.logo{
    width:420px;
    max-width:80%;
}

.claim{
    margin:10px 0 35px;
    font-size:22px;
    letter-spacing:2px;
    color: var(--brown-2);
}

.nav{
    display:flex;
    justify-content:center;
    gap:55px;
    flex-wrap:wrap;
    font-size: var(--fs-nav);
    letter-spacing:2px;
}
.nav a{ color: var(--brown); }

/* =========================
   HERO
========================= */
.hero{ padding: 60px 0 80px; }
.hero-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
    align-items:start;
}
.hero-image img{ width:100%; display:block; }

.welcome{
    letter-spacing:5px;
    font-weight:700;
    margin: 20px 0 25px;
    color: var(--brown);
}

.hero-text h1{
    font-size:34px;
    font-weight:400;
    line-height:1.8;
    letter-spacing:4px;
    margin:0 0 50px;
    color: var(--brown-2);
}

.hero-links{ display:flex; gap: var(--gap-sm); }
.hero-card{ position:relative; display:block; color:#fff; }
.hero-card img{ width:220px; height:220px; object-fit:cover; display:block; }
.hero-card span{
    position:absolute; left:20px; bottom:20px;
    font-size:18px; letter-spacing:3px; font-weight:700;
}

/* =========================
   WAS WIR BIETEN
========================= */
.offer{ padding: 40px 0 90px; }
.offer__bar{ /* legacy -> mapped to .bar look */
    background: var(--brown);
    color:#fff;
    text-align:center;
    font-weight:700;
    letter-spacing:2px;
    padding: 45px 10px;
    margin: 0 auto 48px;
}

.offer__intro{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
    align-items:start;
    margin-bottom: 52px;
}

.offer__intro-left{ text-align:center; color: var(--brown); }
.offer__kicker{
    margin:0 0 10px;
    font-weight:700;
    letter-spacing:2px;
    font-size: 13px;
    color: var(--brown);
}
.offer__headline{
    margin:0;
    font-style: italic;
    letter-spacing:2px;
    line-height:1.9;
    font-size:14px;
    color: var(--brown);
}

/* Fließtext konsistent */
.offer__intro-right p{ margin:0 0 14px; }

.offer__grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 45px;
}

.offer-card__text{
    margin:14px 0 0;
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--muted);
}

.offer-card__img{
    position:relative;
    width:100%;
    aspect-ratio: 1 / 1;
    overflow:hidden;
    background:#ddd;
}
.offer-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.offer-card__label{
    position:absolute;
    left:20px; right:20px; bottom:18px;
    background: rgba(255,255,255,.92);
    color: var(--brown);
    text-align:center;
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing:2px;
    font-style: italic;
    text-transform:uppercase;
}

.offer-card__link{
    margin:10px 0 0;
    font-size: var(--fs-small);
}

/* =========================
   DIE SCHREINEREI (Slider + Text)
========================= */
.schreinerei-top{
    background: transparent;
    padding: 60px 0;
    overflow:hidden;
}
.schreinerei-top input{ display:none; }

.slider{
    width: var(--container);
    max-width: calc(100% - (var(--pad-x) * 2));
    margin:0 auto;
    overflow:hidden;
}
.slides{
    display:flex;
    width:200%;
    transition: transform .35s ease;
}
.slides img{ width:50%; object-fit:contain; display:block; }

#slide1:checked ~ .slider .slides{ transform: translateX(0%); }
#slide2:checked ~ .slider .slides{ transform: translateX(-50%); }

.slider-nav{ text-align:center; margin-top:20px; }
.slider-nav label{
    display:inline-block;
    width:14px; height:14px;
    margin:0 6px;
    background: rgba(255,255,255,.5);
    border-radius:50%;
    cursor:pointer;
}
#slide1:checked ~ .slider-nav label[for="slide1"],
#slide2:checked ~ .slider-nav label[for="slide2"]{ background:#fff; }

.schreinerei-content{
    padding: 80px 0 100px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
}
.schreinerei-left h2{
    font-size:18px;
    letter-spacing:2px;
    margin:0 0 10px;
    color: var(--brown);
}
.schreinerei-left .accent{
    margin:0 0 25px;
    font-style: italic;
    letter-spacing:2px;
    color: var(--brown);
}
.schreinerei-content p{ margin:0 0 16px; color: var(--muted); }

/* =========================
   REFERENZEN (Header + Slider)
========================= */
.refs-section{ padding: 70px 0 90px; }
.refs-header img{ width:100%; display:block; }

.refs-intro{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
    align-items:start;
    padding: 36px 0 20px;
}
.refs-title{ padding-left:10px; }
.refs-kicker{ margin:0 0 6px; font-style: italic; letter-spacing:2px; font-size:14px; color: var(--brown); }
.refs-h2{ margin:0; font-size:20px; font-weight:800; letter-spacing:2px; color: var(--brown); }
.refs-text{ margin:0; color: var(--muted); }

.refs-slider{ position:relative; margin-top:25px; }
.refs-slider input{ display:none; }
.refs-viewport{ overflow:hidden; width:100%; }

.refs-track{
    display:flex;
    width:300%;
    transition: transform .35s ease;
}
.refs-page{
    width: 33.3333%;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
    padding: 40px 40px 20px;
    justify-items:center;
}
.ref-card{ display:inline-block; text-align:center; color: var(--brown); }
.ref-card img{ width:190px; height:190px; object-fit:cover; display:block; background:#ddd; }
.ref-caption{ display:block; margin-top:10px; font-style: italic; font-size:12px; color: var(--brown-2); }

#refp1:checked ~ .refs-viewport .refs-track{ transform: translateX(0%); }
#refp2:checked ~ .refs-viewport .refs-track{ transform: translateX(-33.3333%); }
#refp3:checked ~ .refs-viewport .refs-track{ transform: translateX(-66.6666%); }

.refs-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    padding-top:16px;
}
.refs-dots label{
    width:6px; height:6px;
    background:#d8d8d8;
    border-radius:50%;
    cursor:pointer;
}
#refp1:checked ~ .refs-dots label[for="refp1"],
#refp2:checked ~ .refs-dots label[for="refp2"],
#refp3:checked ~ .refs-dots label[for="refp3"]{ background: var(--brown); }

/* =========================
   KONTAKT
========================= */
.contact-section{ padding: 70px 0 95px; }
.contact-bar{ /* legacy -> mapped to .bar look */
    background: var(--brown);
    color:#fff;
    text-align:center;
    font-weight:700;
    letter-spacing:2px;
    padding: 45px 10px;
    margin: 0 auto var(--bar-mb);
}
.contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items:start;
}

.contact-h2{ margin:0 0 25px; letter-spacing:2px; color: var(--brown); }
.contact-h2__top{ font-style: italic; font-weight:700; font-size:16px; }
.contact-h2__bottom{ font-style: italic; font-weight:300; font-size:16px; }

.contact-box{ background:#e7e7e7; padding: 26px 28px; max-width:420px; }
.contact-box__title{
    margin:0 0 12px;
    font-size: 11px;
    font-style: italic;
    letter-spacing:1px;
}
.contact-box p{ margin:0 0 12px; }

.contact-tiles{ display:flex; gap:18px; margin-top:18px; }
.contact-tile{ display:block; width:230px; max-width:45%; }
.contact-tile img{ width:100%; height:auto; display:block; }

/* =========================
   JOBS
========================= */
.jobs-section{ padding: 70px 0 95px; }
.jobs-header img{ width:100%; display:block; }

.jobs-grid{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap:70px;
    padding-top:28px;
    align-items:start;
}

.jobs-left{ padding-top:20px; letter-spacing:2px; color: var(--brown); }
.jobs-left__top{ margin:0; font-style: italic; font-weight:800; font-size:15px; }
.jobs-left__bottom{ margin:10px 0 0; font-style: italic; font-weight:300; font-size:15px; }

.jobs-intro{ margin:0 0 22px; color: var(--muted); }

.job{ margin-top:22px; }
.job-title{
    margin: 28px 0 14px;
    font-size:14px;
    font-style: italic;
    font-weight:400;
    letter-spacing:2px;
    color: var(--brown);
}

.job-acc{ border-top:1px solid #d7d7d7; }
.job-item{ border-bottom:1px solid #d7d7d7; }
.job-item summary{
    cursor:pointer;
    list-style:none;
    padding: 12px 10px;
    font-size: 11px;
    letter-spacing:1px;
    font-weight:700;
}
.job-item summary::-webkit-details-marker{ display:none; }

.job-content{ padding: 0 10px 14px; }
.job-content ul{ margin:10px 0 0; padding-left:18px; }
.job-content li{ margin:6px 0; }
.job-footnote{ margin-top:10px; font-style: italic; color: var(--brown); font-size:12px; }

/* =========================
   DOWNLOADS + FOOTER
========================= */
.downloads-section{ padding: 70px 0 60px; }
.downloads-bar{
    background: var(--brown);
    color:#fff;
    text-align:center;
    font-weight:700;
    letter-spacing:2px;
    padding: 45px 10px;
    margin: 0 auto var(--bar-mb);
}

.downloads-grid{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap:40px;
    align-items:start;
    padding-bottom:80px;
}
.downloads-image img{ width:100%; display:block; }

.downloads-box{ background:#e7e7e7; padding: 26px 30px; }
.downloads-title{
    margin:0 0 14px;
    font-size:11px;
    font-style: italic;
    letter-spacing:1px;
}
.downloads-list{ margin:0; padding:0; list-style:none; }
.downloads-list li{ margin:10px 0; }

.site-footer{
    display:flex;
    justify-content:center;
    gap:70px;
    padding: 16px 0 0;
}
.site-footer a{
    font-size:11px;
    letter-spacing:2px;
    color: var(--brown);
}

/* =========================
   LEGAL
========================= */
.legal{ padding: 40px 0 60px; }
.legal-box{ background:#e7e7e7; padding:26px 30px; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px){
    .nav{ gap:25px; }

    .hero-grid{ grid-template-columns: 1fr; }
    .hero-links{ justify-content:flex-start; }

    .offer__intro{ grid-template-columns: 1fr; gap:24px; text-align:center; }
    .offer__grid{ grid-template-columns: 1fr; gap:40px; }

    .schreinerei-content{ grid-template-columns: 1fr; gap:40px; }

    .refs-intro{ grid-template-columns: 1fr; gap:18px; text-align:center; }
    .refs-page{ grid-template-columns: 1fr; gap:28px; padding:30px 0 10px; }

    /* FIX: Kontakt responsive (dein aktueller Code war ungültig) */
    .contact-grid{ grid-template-columns: 1fr; gap:40px; }
    .contact-tiles{ flex-direction: column; align-items:flex-start; }
    .contact-tile{ width: min(360px, 100%); max-width:100%; }

    .jobs-grid{ grid-template-columns: 1fr; gap:18px; }
    .jobs-left{ padding-top:0; }

    .downloads-grid{ grid-template-columns: 1fr; }
    .downloads-image{ width: min(320px, 100%); }
}

/* =========================
   LIGHTBOX (Referenzen)
========================= */

.lightbox{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 40px;
}

.lightbox img{
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox:target{
    display: flex;
}

.lightbox-close{
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 40px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
}