/* ==================================================================
   KEOH030 · Werkschau · /welten und die Case-Seiten
   Angelegt 26.08.2026 (Werkschau-Auftrag, Phase 4).

   Eine Datei für alle generierten Seiten, damit sie einmal geladen
   und dann aus dem Cache bedient wird. Die Werte kommen aus derselben
   Token-Liste wie die Startseite · hier steht keine zweite Wahrheit,
   nur dieselbe noch einmal, weil diese Seiten kein Inline-CSS haben.
   ================================================================== */



*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--schrift-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-size:17px;line-height:1.6}


a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--rust-soft);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

.wrap{width:min(1160px,90vw);margin:0 auto}
.wrap--eng{width:min(760px,90vw)}


/* ---------- Marken für Typ und Status ---------- */
.marke{font-family:var(--schrift-zahl);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.34em .78em;border-radius:99px;
  border:1px solid var(--line-hi);background:rgba(11,10,9,.55);
  backdrop-filter:blur(4px);white-space:nowrap;display:inline-block}
.marke--typ{color:var(--gold)}
.marke--live{color:#7FC6A0;border-color:rgba(127,198,160,.4)}
.marke--konzept{color:var(--rust-soft);border-color:rgba(224,104,74,.45)}
.marke--arbeit{color:var(--ink-mute)}
.marken{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- Werkschau-Index ---------- */
.schau-kopf{padding:clamp(64px,10vw,132px) 0 clamp(40px,6vw,72px)}
.eyebrow{font-family:var(--schrift-zahl);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.schau-h1{font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(2.4rem,7vw,5.2rem);line-height:.94;letter-spacing:-.026em;
  text-transform:uppercase;margin:0;text-wrap:balance}
.schau-h1 .rust{color:var(--rust)}
.schau-lead{font-size:clamp(1.06rem,1.6vw,1.24rem);line-height:1.62;
  color:var(--ink-soft);max-width:56ch;margin:1.5rem 0 0}

.liste{display:grid;gap:clamp(20px,2.6vw,34px);padding-bottom:clamp(64px,9vw,120px)}
.karte{position:relative;display:grid;gap:clamp(20px,3vw,44px);align-items:center;
  grid-template-columns:1fr;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--flaeche-ruhig);text-decoration:none;color:var(--ink);
  transition:border-color .4s,transform .4s}
@media (min-width:840px){
  .karte{grid-template-columns:1.15fr 1fr;gap:0}
  .karte:nth-child(even) .karte-bild{order:2}
}
.karte:hover{border-color:var(--rust);transform:translateY(-4px)}
.karte-bild{position:relative;overflow:hidden;background:#0d0c0b;aspect-ratio:16/10}
.karte-bild img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.1) contrast(1.03) brightness(.92);
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s}
.karte:hover .karte-bild img{transform:scale(1.04);filter:none}
.karte-text{padding:clamp(24px,3.4vw,48px)}
.karte-titel{font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.022em;
  text-transform:uppercase;margin:1rem 0 .8rem}
.karte-idee{color:var(--ink-soft);max-width:46ch;margin:0}
.karte-rolle{margin:1.1rem 0 0;font-family:var(--schrift-zahl);font-size:.8rem;
  letter-spacing:.04em;color:var(--ink-mute)}
.karte-go{display:inline-flex;align-items:center;gap:.6ch;margin-top:1.4rem;
  font-family:var(--schrift-zahl);font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rust-soft);min-height:44px}
.karte-go .arr{transition:transform .3s}
.karte:hover .karte-go .arr{transform:translateX(4px)}

/* Was bewusst noch nicht hier steht ·  Ehrlichkeit als Teil der Seite */
.warteraum{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,110px)}
.warteraum h2{font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.4rem,2.8vw,2rem);text-transform:uppercase;letter-spacing:-.018em;
  margin:0 0 1.2rem}
.warteraum ul{list-style:none;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.warteraum li{border-top:1px solid var(--line-hi);padding-top:.9rem;
  color:var(--ink-soft);font-size:1rem;line-height:1.55}
.warteraum li b{display:block;font-family:var(--schrift-zahl);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}

/* ---------- Case-Seite ---------- */
.case-hero{position:relative;min-height:min(78svh,760px);display:flex;
  align-items:flex-end;overflow:hidden;background:#0d0c0b}
.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.08) contrast(1.04) brightness(.7)}
.case-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,10,9,.96) 4%,rgba(11,10,9,.5) 45%,rgba(11,10,9,.25) 100%)}
.case-hero .wrap{position:relative;z-index:2;padding:clamp(40px,7vw,88px) 0}
.case-h1{font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(2.3rem,6.6vw,5rem);line-height:.94;letter-spacing:-.026em;
  text-transform:uppercase;margin:1.1rem 0 0;text-wrap:balance}
.case-idee{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.55;
  color:var(--ink-soft);max-width:54ch;margin:1.3rem 0 0}

.block{padding:clamp(52px,8vw,104px) 0;border-top:1px solid var(--line)}
.block h2{font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 1.4rem}
.block p{color:var(--ink-soft);max-width:60ch}
.block p + p{margin-top:1rem}

.fakten{list-style:none;display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fakten li{border-top:1px solid var(--line-hi);padding-top:.9rem;
  color:var(--ink-soft);font-size:1rem;line-height:1.55}
.fakten li b{display:block;font-family:var(--schrift-zahl);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}

.koennen{list-style:none;margin:0;padding:0}
.koennen li{position:relative;padding-left:1.6rem;margin-bottom:.9rem;
  color:var(--ink-soft);font-size:1.04rem;line-height:1.55}
.koennen li::before{content:"·";position:absolute;left:.4rem;top:-.1em;
  color:var(--rust);font-size:1.6em;line-height:1}

/* Desktop und Mobil nebeneinander · der Auftrag verlangt beides gezeigt */
.geraete{display:grid;gap:clamp(20px,3vw,40px);align-items:end;
  grid-template-columns:1fr}
@media (min-width:760px){.geraete{grid-template-columns:2.2fr 1fr}}
.geraet{border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--flaeche-ruhig)}
.geraet figcaption{font-family:var(--schrift-zahl);font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);
  padding:.8rem 1rem;border-top:1px solid var(--line)}

.hinweis{border-left:2px solid var(--rust);padding:.2rem 0 .2rem 1.3rem;
  margin:clamp(26px,3.4vw,40px) 0 0;color:var(--ink-soft);max-width:62ch}
.hinweis b{color:var(--ink)}

/* ---------- Abschluss und Fuß ---------- */
.cta{display:inline-flex;align-items:center;gap:.7ch;font-family:var(--schrift-zahl);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 1.9em;border-radius:99px;min-height:44px;
  transition:transform .3s,box-shadow .3s,border-color .3s,color .3s}
.cta--rust{background:var(--rust);color:#F5F1EA;box-shadow:0 16px 40px -18px rgba(196,52,26,.9)}
.cta--rust:hover{transform:translateY(-3px)}
.cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-hi)}
.cta--ghost:hover{transform:translateY(-3px);border-color:var(--rust-soft);color:var(--rust-soft)}
.cta .arr{transition:transform .3s}
.cta:hover .arr{transform:translateX(4px)}
.wege{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}

.fuss{border-top:1px solid var(--line);padding:clamp(36px,5vw,64px) 0;
  font-family:var(--schrift-zahl);font-size:.82rem;letter-spacing:.04em;
  color:var(--ink-mute)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center}
.fuss a{color:var(--ink-mute);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;margin-right:1.4rem}
.fuss a:hover{color:var(--rust-soft)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .karte:hover,.cta:hover{transform:none}
  .karte:hover .karte-bild img{transform:none}
}