/* ===== SCHWAN Unter uns – kompakter CSS-Block (Skeleton-kompatibel) ===== */
/* Hero */
.werk-hero{position:relative;min-height:62vh;color:#fff;display:flex;align-items:center}
.werk-hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25))}
.werk-hero .content{position:relative;z-index:1;text-align:center}
.werk-hero h1{margin:0 0 .5rem}


/* Intro 2-Spalter auf Skeleton-Floats (65/35) */
.werk-intro .cols{display:block}
.werk-intro .cols:after{content:"";display:block;clear:both}
.werk-intro .cols>div{float:left;width:65.3333333333%;margin-left:0;box-sizing:border-box}
.werk-intro .cols>aside{float:left;width:30.6666666667%;margin-left:4%;box-sizing:border-box}


/* Kachelgrid: 2 Spalten via Floats */
.werk-grid{margin:-5px 0 0 -5px}
.werk-grid:after{content:"";display:block;clear:both}
.werk-grid a{float:left;width:calc(50% - 5px);margin:5px 0 0 5px;border-radius:8px;overflow:hidden;position:relative}
.werk-grid img{width:100%;height:220px;object-fit:cover;transform:scale(1.02);transition:transform .3s ease}
.werk-grid a:hover img{transform:scale(1.06)}
.werk-caption{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:4px;font-size:.9rem}


/* Fact-Boxen: 3 Spalten via Floats */
.werk-facts{margin:-12px 0 0 -12px}
.werk-facts:after{content:"";display:block;clear:both}
.werk-fact{float:left;width:calc(33.333% - 12px);margin:12px 0 0 12px;background:#f6f6f6;border-radius:10px;padding:18px;text-align:center}
.werk-fact .num{font-weight:700;font-size:1.6rem}
.werk-fact .txt{opacity:.8}


/* Timeline (horizontal) */
.werk-timeline-wrap{padding:40px 0}
.werk-timeline-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.werk-controls{display:flex;gap:8px}
.werk-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:10px 12px;cursor:pointer}
.werk-btn[disabled]{opacity:.35;cursor:not-allowed}
.werk-timeline{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.werk-step{flex:0 0 80%;max-width:900px;scroll-snap-align:start;background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.06);overflow:hidden}
.werk-step figure{margin:0}
.werk-step img{width:100%;height:420px;object-fit:cover;display:block}
.werk-step .body{padding:16px 18px}
.werk-step h4{margin:.2rem 0 .4rem}
.werk-step .meta{font-size:.9rem;letter-spacing:.02em;color:#999}


/* Galerie (Columns) */
.werk-gallery{column-count:3;column-gap:14px}
.werk-gallery a{display:inline-block;width:100%;margin:0 0 14px;position:relative}
.werk-gallery img{width:100%;height:auto;border-radius:10px}


/* Responsive Breakpoints (Skeleton-orientiert) */
@media (max-width:1160px){.werk-grid img{height:200px}.werk-step{flex-basis:88%}}
@media (max-width:750px){
    .werk-intro .cols>div,.werk-intro .cols>aside{float:none;width:100%;margin-left:0}
    .werk-fact{width:calc(50% - 12px)}
    .werk-gallery{column-count:2}
}
@media (max-width:550px){
    .werk-grid a{width:100%}
    .werk-grid img{height:180px}
    .werk-fact{width:100%}
    .werk-step img{height:240px}
    .werk-gallery{column-count:1}
}

/* Timeline Controls – konsistente Button-Darstellung */
.werk-controls {
    display:flex;
    gap:8px;
    align-items:center;
}

.werk-controls .werk-btn {
    /* Reset + Layout */
    -webkit-appearance: none;
    appearance: none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    line-height:1;

    /* Look & Feel */
    background:#fff;
    color:#333;
    border:1px solid #d9d9d9;
    border-radius:8px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:background .15s ease, border-color .15s ease, transform .06s ease;
    cursor:pointer;
}

.werk-controls .werk-btn i {
    font-size:20px;
    line-height:1;
}

.werk-controls .werk-btn:hover:not([disabled]) {
    background:#f8f8f8;
    border-color:#cfcfcf;
}

.werk-controls .werk-btn:active:not([disabled]) {
    transform:translateY(1px);
}

.werk-controls .werk-btn:focus {
    outline:2px solid #CA171F;  /* Markenrot */
    outline-offset:2px;
}

.werk-controls .werk-btn[disabled] {
    opacity:.4;
    cursor:not-allowed;
}

/* ===== Werk-Products (Carousel) – 4:3 & Responsive Sichtbarkeit ===== */

/* 1) 4:3 für Produktbilder */
.werk-products-wrap .werk-step figure{
    margin:0;
    aspect-ratio: 4 / 3;           /* modernes, sauberes 4:3 */
    overflow:hidden;
    border-radius:10px;            /* like .img-rounded */
}
.werk-products-wrap .werk-step img{
    width:100%;
    height:100%;                   /* überschreibt globale 420px-Höhe */
    object-fit:cover;              /* saubere Zuschnitte */
    display:block;
}

/* 2) Kartenbreiten: mindestens 2 auf großen Screens, 1 auf Phones */
.werk-products-wrap .werk-timeline{
    gap:18px;                      /* konsistent zur Fertigungs-Timeline */
}

/* Baseline: sehr kleine Screens (Phones) → 1 Karte */
.werk-products-wrap .werk-step{
    flex:0 0 100%;
    max-width:100%;
}

/* Ab ~Phablet/kleinere Tablets → 1–1.5 Karten sichtbar (sanfter Übergang) */
@media (min-width: 550px){
    .werk-products-wrap .werk-step{ flex-basis: 80%; max-width:80%; }
}

/* Ab ~Tablet quer/kleine Laptops → gut 1.5–2 Karten */
@media (min-width: 750px){
    .werk-products-wrap .werk-step{ flex-basis: 66%; max-width:66%; }
}

/* Ab ~Desktop → mindestens 2 Karten gleichzeitig */
@media (min-width: 1000px){
    .werk-products-wrap .werk-step{ flex-basis: 48%; max-width:48%; }
}

/* Sehr große Screens → 2–3 Karten (wir bleiben aber bei großen, gut lesbaren Kacheln) */
@media (min-width: 1400px){
    .werk-products-wrap .werk-step{ flex-basis: 38%; max-width:38%; }
}

/* 3) Body-Abstände (optional, leicht straffer) */
.werk-products-wrap .werk-step .body{
    padding:14px 16px 18px;
}
.werk-products-wrap .werk-step h4{
    margin:.25rem 0 .4rem;
}