/* ==========================================================================
   dkusz design – Visual Design System "Werkbank"
   --------------------------------------------------------------------------
   Eigenstaendige Gestaltungssprache fuer Produktdesign: technische
   Beschriftung, asymmetrisches Raster, Materialebenen.

   Bewusst in einer EIGENEN Datei und durchgaengig mit dem Praefix .wb- –
   dadurch laeuft sie neben dem bestehenden Theme, ohne eine einzige
   vorhandene Regel zu ueberschreiben.

   Nutzt die vorhandenen Farbvariablen des Themes (--bg, --text, --accent …),
   damit Dark Mode / White Mode / eigene Farbmodi unveraendert weiter greifen.
   ========================================================================== */

.wb {
  /* Die Gestaltungs-Tokens stehen seit Version 3.0 global in theme.css
     (:root) und gelten damit fuer die gesamte Website. Hier nur noch die
     Alias-Namen, damit die bestehenden .wb-Regeln unveraendert greifen. */
  --wb-mono: var(--mono);
  --wb-paper: var(--paper);
  --wb-paper-edge: var(--paper-edge);
  --wb-line: var(--line);
  --wb-line-strong: var(--line-strong);

  --wb-gutter: clamp(1.25rem, 4vw, 3rem);
  --wb-max: 1360px;

  color: var(--text);
}

/* Raster ------------------------------------------------------------------ */
.wb-wrap {
  width: min(var(--wb-max), calc(100% - 2 * var(--wb-gutter)));
  margin-inline: auto;
}

.wb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
}

/* Technische Beschriftung ------------------------------------------------- */
.wb-label {
  font-family: var(--wb-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.wb-meta {
  font-family: var(--wb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0;
}

.wb-index {
  font-family: var(--wb-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Masslinie: duenne Linie mit Endstrichen, wie in einer technischen Zeichnung */
.wb-rule {
  position: relative;
  height: 1px;
  background: var(--wb-line);
  margin: 0;
  border: 0;
}

.wb-rule::before,
.wb-rule::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--wb-line-strong);
}

.wb-rule::before { left: 0; }
.wb-rule::after { right: 0; }

/* ==========================================================================
   01 – Grosses Bild / Video
   Fester, bildschirmfuellender Bereich. Die Hoehe steht per CSS fest, damit
   sich beim Austausch von Bild gegen Video (oder umgekehrt) nichts
   verschiebt – das Medium passt sich dem Rahmen an, nie umgekehrt.
   ========================================================================== */
.wb-media {
  position: relative;
  height: min(88vh, 900px);
  min-height: 420px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.wb-media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sehr dezenter Schleier: haelt die Schrift lesbar, ohne das Bild zu daempfen. */
.wb-media-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 52% at 50% 58%, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 78%),
    linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, transparent 30%);
  pointer-events: none;
}

.wb-media-inner {
  position: relative;
  text-align: center;
  padding: 2rem 1.5rem;
}

.wb-media-logo {
  display: block;
  height: auto;
  max-width: 46vw;
  margin: 0 auto clamp(1.2rem, 3vw, 2rem);
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.75)) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}

/* Drehung ausschliesslich um den eigenen Mittelpunkt.
   transform-origin ist zwar bereits per Standard mittig, wird hier aber
   bewusst ausgeschrieben, damit der Drehpunkt garantiert fix bleibt und sich
   das Logo nicht durch den Raum bewegt. Richtung, Dauer und Art kommen als
   CSS-Variablen aus den Theme-Einstellungen (siehe template-werkbank.php). */
.wb-media-logo.is-rotating {
  transform-origin: 50% 50%;
  transform-box: view-box;
  will-change: transform;
  animation-name: wb-spin;
  animation-duration: var(--wb-logo-duration, 40s);
  animation-timing-function: var(--wb-logo-ease, linear);
  animation-iteration-count: var(--wb-logo-iterations, infinite);
  animation-direction: var(--wb-logo-direction, normal);
  animation-fill-mode: forwards;
}

@keyframes wb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wb-media-title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.wb-media-sub {
  font-family: var(--wb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* Zarter Scroll-Hinweis */
.wb-media-scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7));
  transform: translateX(-50%);
}

/* ==========================================================================
   2. Disziplinen-Band
   ========================================================================== */
.wb-strip {
  border-bottom: 1px solid var(--wb-line);
  padding: clamp(1.1rem, 2.4vw, 1.8rem) 0;
}

.wb-strip-inner {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.wb-strip-inner .wb-label { flex: 0 0 auto; }

.wb-strip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-strip-list li {
  font-family: var(--wb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wb-strip-list li::before {
  content: "\25B8\00A0";
  color: var(--accent);
}


/* ==========================================================================
   04 – Werkverzeichnis – asymmetrisches Raster
   ========================================================================== */
.wb-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }

.wb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.wb-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0;
  color: var(--heading-color);
}

/* Klares, gleichmaessiges Raster: alle Arbeiten gleich breit, gleicher
   Bildbereich, gleiche Hoehe – keine Arbeit wirkt wichtiger als eine andere.
   Der Aufbau Bild -> Linie -> Text bleibt erhalten. */
.wb-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

.wb-work {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wb-work-media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--wb-line);
  aspect-ratio: 1 / 1;   /* quadratisch, fuer alle Karten identisch */
}

.wb-work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Bewusst ohne Transformation: das Bild behaelt bei Hover exakt seine
     Groesse und Position. Als Hinweis auf die Verlinkung wachsen nur die
     Eckwinkel und der Pfeil. */
}

.wb-work:hover .wb-corner,
.wb-work:focus-visible .wb-corner { width: 26px; height: 26px; }

.wb-work-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wb-line);
  flex: 1;               /* alle Karten enden auf gleicher Hoehe */
}

.wb-work-texts { min-width: 0; }

.wb-work-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.1;
  margin: 0.35rem 0 0;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.wb-work-material {
  font-family: var(--wb-mono);
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wb-work-arrow {
  font-family: var(--wb-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
  display: inline-block;
  transition: transform 0.3s ease;
}

.wb-work:hover .wb-work-arrow { transform: translateX(4px); }

/* ==========================================================================
   4. Prozess – vom Werkstoff zum Objekt
   ========================================================================== */
.wb-process {
  border-top: 1px solid var(--wb-line);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.wb-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.wb-step { position: relative; }

.wb-step-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--wb-line);
}

.wb-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85);
  transition: filter 0.6s ease;   /* nur Farbigkeit, keine Bewegung */
}

.wb-step:hover .wb-step-media img {
  filter: saturate(1);
}

.wb-step-no {
  font-family: var(--wb-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0.9rem 0 0.25rem;
}

.wb-step-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
  color: var(--heading-color);
}

.wb-step-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   5. Materialebene – aufgelegte Karten
   ========================================================================== */
.wb-materials {
  border-top: 1px solid var(--wb-line);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.wb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Physisch aufgelegt wirkende Karte: minimaler Versatz, flacher Schatten,
   angedeutete Papierkante – bewusst sparsam, nicht als Textur-Tapete. */
.wb-card {
  position: relative;
  background: var(--wb-paper);
  border: 1px solid var(--wb-paper-edge);
  padding: 1.4rem 1.3rem 1.6rem;
  box-shadow: 0 1px 0 var(--wb-paper-edge), 0 14px 28px -22px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.wb-card:nth-child(odd)  { transform: rotate(-0.35deg); }
.wb-card:nth-child(even) { transform: rotate(0.3deg) translateY(6px); }

.wb-card:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 1px 0 var(--wb-paper-edge), 0 22px 36px -24px rgba(0, 0, 0, 1);
}

/* angedeutete gefalzte Ecke oben rechts */
.wb-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, var(--bg) 0 50%, var(--wb-paper-edge) 50% 52%, transparent 52%);
}

.wb-card-media {
  position: relative;
  margin: -1.4rem -1.3rem 1.1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--wb-paper-edge);
}

.wb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-card-no {
  font-family: var(--wb-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.wb-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0.5rem 0 0.6rem;
  color: var(--heading-color);
}

.wb-card-body {
  font-family: var(--wb-mono);
  font-size: 0.74rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   Reveal – sanftes Einblenden
   ========================================================================== */
.wb-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wb-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .wb-reveal { opacity: 1; transform: none; transition: none; }
  .wb-media-logo.is-rotating { animation: none; }
  .wb-step-media img, .wb-card { transition: none; }
}

/* ==========================================================================
   Mobile – bewusst eigenes Layout, keine verkleinerte Desktop-Version
   ========================================================================== */
@media (max-width: 900px) {
  .wb-media { height: min(76vh, 640px); }
  .wb-media-logo { max-width: 54vw; }

  .wb-strip-inner { display: block; }
  .wb-strip-inner .wb-label { margin-bottom: 0.6rem; }

  /* Tablet: zwei Spalten – Groessen bleiben ueberall identisch. */
  .wb-works { grid-template-columns: repeat(2, 1fr); }

  /* Prozess: horizontal wischbar – auf dem Handy angenehmer als 4 Reihen */
  .wb-steps {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-inline: calc(-1 * var(--wb-gutter));
    padding-inline: var(--wb-gutter);
    scrollbar-width: none;
  }

  .wb-steps::-webkit-scrollbar { display: none; }

  .wb-step {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }

  .wb-section-head { display: block; }
}

@media (max-width: 520px) {
  /* Smartphone: eine Spalte. */
  .wb-works { grid-template-columns: 1fr; }
  .wb-card:nth-child(odd),
  .wb-card:nth-child(even) { transform: none; }
  .wb-step { flex-basis: 78%; }
}


/* ==========================================================================
   Projektseiten – dieselbe Gestaltungssprache wie die Startseite
   ========================================================================== */
.wb-detail-hero {
  position: relative;
  height: min(72vh, 720px);
  min-height: 320px;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--wb-line);
}

.wb-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb-detail { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }

.wb-detail-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.wb-detail-title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0;
  color: var(--heading-color);
}

.wb-detail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wb-line);
}

.wb-detail-text {
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.wb-detail-block { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Breite Materialkarte fuer laengere Texte (z. B. Entstehungsgeschichte) */
.wb-card--wide { grid-column: span 2; }

/* Galerie im gleichmaessigen Raster – Lightbox-Funktion bleibt unveraendert,
   es aendert sich ausschliesslich die Darstellung. */
.wb .detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}

.wb .detail-gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--wb-line);
  border-radius: 0;
  background: var(--surface);
  cursor: zoom-in;
}

.wb .detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wb .detail-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.wb .detail-gallery-item:hover::after,
.wb .detail-gallery-item:focus-visible::after {
  border-color: var(--accent);
}

.wb-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--wb-line);
}

@media (max-width: 900px) {
  .wb-detail-hero { height: min(52vh, 420px); }
  .wb .detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .wb-card--wide { grid-column: span 1; }
  .wb-detail-nav { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}

@media (max-width: 520px) {
  .wb .detail-gallery { grid-template-columns: 1fr; }
}