/* projekte.css: eigene Gestalt der Seite Projekte (Entwurf 03.10.2026).
   Martin: „zu eckig, verschiedene Farben passen nicht zusammen“. Deshalb hier:
   eine Farbwelt (warmes Weiß, Schwarz, Gold als einziger Akzent), weiche Rundungen,
   Karten mit großem Bild oben statt grauer Kästen mit kleinem Bild rechts.
   Gilt nur unter .pj (an <main>), die KI-Werkstatt mit denselben Klassen bleibt unverändert. */
.pj{--pj-grund:#F7F6F2;--pj-karte:#FFFFFF;--pj-tinte:#151515;--pj-leise:#5C5A55;--pj-linie:rgba(21,21,21,.08);
  --pj-gold:#E8C547;--pj-gold-zart:rgba(232,197,71,.16);--pj-rund:22px;background:var(--pj-grund)}

/* Kopf */
.pj .wk-kopfteil{background:var(--pj-grund);padding:72px 0 28px}
.pj .wk-kopfteil h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.035em;max-width:none;text-wrap:balance}
.pj .wk-kopfteil .lead{max-width:none;color:var(--pj-leise);font-size:1.12rem;line-height:1.65}
.pj .wk-kopfteil .klein{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:9px 16px;border-radius:999px;
  background:var(--pj-karte);border:1px solid var(--pj-linie);color:var(--pj-tinte);font-size:.86rem;font-weight:600}
.pj .wk-kopfteil .klein::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pj-gold)}

/* Raster: zwei Karten nebeneinander, am Handy eine */
.pj .wk-stationen-teil{background:var(--pj-grund);padding:8px 0 80px}
.pj .wk-abschnitt{margin:20px 0 22px;color:var(--pj-leise)}
.pj .wk-stationen{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:28px;align-items:stretch}   /* alle Karten gleich hoch, auch über die Reihen */
@media (max-width:900px){.pj .wk-stationen{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:20px}}

/* Karte */
.pj .wk-station{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"bild bild" "text text" "siegel start";grid-template-rows:auto 1fr auto;
  gap:0;padding:0;overflow:hidden;border-radius:var(--pj-rund);background:var(--pj-karte);
  border:1px solid var(--pj-linie);
  box-shadow:0 1px 2px rgba(21,21,21,.04),0 18px 40px -26px rgba(21,21,21,.28);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.pj .wk-station:hover{transform:translateY(-4px);border-color:var(--pj-linie);
  box-shadow:0 1px 2px rgba(21,21,21,.05),0 28px 56px -26px rgba(21,21,21,.36)}
.pj .wk-station-fuss{display:contents}

/* Bild oben, randlos, mit sanftem Übergang */
.pj .wk-station-bild{grid-area:bild;max-width:none;border:0;border-bottom:1px solid var(--pj-linie);
  aspect-ratio:16/9;overflow:hidden;background:#EDEBE5}
.pj .wk-station-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pj .wk-station:hover .wk-station-bild img{transform:scale(1.03)}

/* Nummer als goldene Marke auf dem Bild */
.pj .wk-station-nr{position:absolute;left:18px;top:18px;z-index:2;margin:0;padding:6px 12px;border-radius:999px;
  background:var(--pj-gold);color:#111;font-size:.82rem;letter-spacing:.04em;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.pj .wk-station:not(:has(.wk-station-bild)) .wk-station-nr{position:static;margin:24px 26px 0;justify-self:start}

/* Text */
.pj .wk-station-text{grid-area:text;padding:24px 26px 18px}
.pj .wk-station h3{font-size:1.4rem;letter-spacing:-.025em;margin:0 0 10px}
.pj .wk-station-was{color:var(--pj-leise);font-size:1rem;line-height:1.65;margin:0 0 18px}
.pj .wk-station-daten{gap:0;border-top:1px solid var(--pj-linie)}
.pj .wk-station-daten>div{display:block;padding:12px 0;border-bottom:1px solid var(--pj-linie)}
.pj .wk-station-daten>div:last-child{border-bottom:0}
.pj .wk-station-daten dt{display:block;margin:0 0 4px;font-size:10.5px;letter-spacing:.14em;color:#8A877F}
.pj .wk-station-daten dd{font-size:.93rem;line-height:1.6;color:var(--pj-tinte)}

/* Fuß: Stand als ruhige Pille, Knopf als Pille */
.pj .wk-siegel-klein{grid-area:siegel;align-self:center;margin:0 0 22px 26px;padding:0;border:0;background:none;
  flex-direction:row;align-items:center;gap:10px}
.pj .wk-siegel-klein .wk-siegel-wort{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--pj-gold-zart);color:#5E4B0E;border:0;font-size:.74rem;letter-spacing:.1em}
.pj .wk-siegel-klein .wk-siegel-wort::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A21C}
.pj .wk-siegel-klein .wk-siegel-text{font-size:.82rem;color:var(--pj-leise)}
.pj .wk-start{grid-area:start;align-self:center;margin:0 26px 22px 12px;border-radius:999px;padding:12px 20px;
  background:var(--pj-tinte);color:#fff;font-size:.9rem}
.pj .wk-start:hover{background:var(--pj-gold);color:#111}
@media (max-width:520px){
  .pj .wk-station{grid-template-columns:minmax(0,1fr);grid-template-areas:"bild" "text" "siegel" "start"}
  .pj .wk-siegel-klein{margin:0 22px 12px}
  .pj .wk-start{margin:0 22px 22px;justify-self:stretch}
  .pj .wk-station-text{padding:22px 22px 16px}
}
.pj .projekte-austausch{margin-top:34px;padding:22px 26px;border-radius:var(--pj-rund);background:var(--pj-karte);
  border:1px solid var(--pj-linie);font-size:.98rem}
@media (prefers-reduced-motion:reduce){.pj .wk-station,.pj .wk-station-bild img{transition:none}.pj .wk-station:hover{transform:none}}

/* Stand-Schild als glänzender Knopf (Martin 03.10.2026: „grün mit weißer Schrift, sieht verspiegelt aus“).
   Grün nur für das, was läuft (Live, Online). In Arbeit und Vorführung gleich gebaut, aber in Gold. */
.pj .wk-siegel-klein .wk-siegel-wort{position:relative;overflow:hidden;border:0;padding:7px 14px 7px 12px;color:#fff;
  font-size:.74rem;letter-spacing:.12em;text-shadow:0 1px 1px rgba(0,0,0,.25);
  background:linear-gradient(180deg,#4ADE80 0%,#22A355 48%,#15803D 52%,#11692F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.2),0 6px 16px -6px rgba(21,128,61,.7)}
.pj .wk-siegel-klein .wk-siegel-wort::before{background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.9)}
.pj .wk-siegel-klein .wk-siegel-wort::after{content:"";position:absolute;left:6%;right:6%;top:1px;height:46%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08));pointer-events:none}
.pj .wk-siegel-bald .wk-siegel-wort{color:#3B2E05;text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,#F7DE7E 0%,#E8C547 48%,#D4AE2C 52%,#B8931C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.15),0 6px 16px -6px rgba(184,147,28,.7)}
.pj .wk-siegel-bald .wk-siegel-wort::before{background:#3B2E05;box-shadow:none}

/* Webseiten-Vorlagen (vorlagen.html): gleiche Stationen wie Projekte, dazu Merkmale und Hinweis */
.vl-hinweis { margin-top: 18px; max-width: 46rem; font-size: 15px; color: #5b5b5f; }
.vl-merkmale { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vl-merkmale li { padding: 4px 12px; border-radius: 999px; background: #f1efe9; font-size: 14px; font-weight: 600; }
.vl-branche { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--grau, #5b5b5f); }