/* «Aus der Werkstatt» und das Archiv (Ticket a8449117). Abstände aus den
   Stufen in marke.css, Schrift nie unter --schrift-1. Alles unter
   #werkstatt bzw. .werkstattarchiv, nichts auf :root oder body. */
#werkstatt.dunkel{background:#141617;color:#E8E4DC;border-bottom:0}
#werkstatt .wmosaik{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--raum-3)}
#werkstatt .wklein{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--raum-3)}
#werkstatt .wk{position:relative;overflow:hidden;border-radius:3px;background:#202325;display:block}
#werkstatt .wk img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
#werkstatt .wklein .wk img{position:absolute;inset:0}
#werkstatt .wk:hover img{transform:scale(1.03)}
#werkstatt .wk.gross{aspect-ratio:4/3}
#werkstatt .wk .datum{position:absolute;left:0;right:0;bottom:0;padding:var(--raum-6) var(--raum-4) var(--raum-3);
  background:linear-gradient(180deg,transparent,rgba(20,22,23,.85));color:#fff;
  font-family:var(--mono);font-size:var(--schrift-1);letter-spacing:.16em;text-transform:uppercase}
#werkstatt .wk.mehr::after{content:"";position:absolute;inset:0;background:rgba(20,22,23,.62)}
#werkstatt .wk.mehr span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;color:#fff;
  font-family:var(--display);font-weight:700;font-size:var(--schrift-3);letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
#werkstatt .wk.mehr span b{display:block;font-size:clamp(22px,2.6vw,34px);letter-spacing:0}
#werkstatt .wfuss{display:flex;gap:var(--raum-4);flex-wrap:wrap;margin-top:var(--raum-4)}
#werkstatt .wfuss .insta{font-family:var(--display);font-weight:700;font-size:var(--schrift-2);letter-spacing:.06em;text-transform:uppercase;
  padding:var(--raum-3) var(--raum-4);border:1px solid #3A3E41;border-radius:3px;color:#E8E4DC;white-space:nowrap;min-height:var(--ziel-min);display:inline-flex;align-items:center}
#werkstatt .wfuss .insta:hover{color:var(--orange)}
@media (prefers-reduced-motion:reduce){#werkstatt .wk img{transition:none}#werkstatt .wk:hover img{transform:none}}
@media (max-width:760px){
  #werkstatt .wmosaik{grid-template-columns:1fr}
  #werkstatt .wk.gross{aspect-ratio:4/5}
  #werkstatt .wklein{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  #werkstatt .wklein .wk{aspect-ratio:1/1}
  #werkstatt .wfuss .insta{min-height:var(--ziel-min-hand)}
}

/* Archiv: nach Monat, drei Spalten im Hochformat, am Telefon eine. */
.werkstattarchiv{padding-top:calc(var(--raum-6) * 4)}
.werkstattarchiv .jahre{display:flex;gap:var(--raum-2);flex-wrap:wrap;margin-top:var(--raum-4)}
.werkstattarchiv .jahre button{font-family:var(--display);font-weight:700;font-size:var(--schrift-2);letter-spacing:.06em;border:1px solid var(--line);
  border-radius:999px;padding:var(--raum-2) var(--raum-4);background:var(--paper);color:var(--txt);cursor:pointer;min-height:var(--ziel-min)}
.werkstattarchiv .jahre button.on{background:var(--txt);color:var(--beige);border-color:var(--txt)}
.werkstattarchiv .monat{font-family:var(--mono);font-size:var(--schrift-1);letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);margin:var(--raum-6) 0 var(--raum-3)}
.werkstattarchiv .araster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--raum-4)}
.werkstattarchiv .ab{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:block}
.werkstattarchiv .ab .bild{aspect-ratio:4/5;overflow:hidden}
.werkstattarchiv .ab img{width:100%;height:100%;object-fit:cover;display:block}
.werkstattarchiv .ab .abinfo{padding:var(--raum-3) var(--raum-4);display:flex;justify-content:space-between;gap:var(--raum-3);
  font-size:var(--schrift-2);color:var(--mut2)}
.werkstattarchiv .ab .abinfo b{color:var(--orange-tief);font-weight:600}
@media (max-width:760px){.werkstattarchiv .araster{grid-template-columns:1fr}}