/* ===========================================================================
   Artikelseiten der Editorial-Demo — ergänzt stil.css.
   Formsprache wie auf der Startseite: 20-px-Radien, Kupfer als einziger
   Akzent, Flächen statt Rahmen, ruhige Typografie mit schmaler Lesespalte.
   =========================================================================== */

/* ---------- Kopf ---------- */
.a-kopf{padding:calc(90px + clamp(38px,5vw,72px)) 0 clamp(26px,3.4vw,42px)}
.a-krumen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--tx-3);margin:0 0 22px}
.a-krumen a{transition:color .2s}
.a-krumen a:hover{color:var(--kupfer)}
.a-krumen span{opacity:.5}
.a-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.a-chip{display:inline-block;padding:6px 13px;border-radius:50px;font-size:12px;
  font-weight:600;background:var(--navy);color:#fff}
.a-chip.leise{background:var(--grund-2);color:var(--tx-2);font-weight:500}
.a-kopf h1{font-size:clamp(32px,4.2vw,58px);font-weight:500;line-height:1.13;
  letter-spacing:-.025em;max-width:19ch;text-wrap:balance}
.a-dek{margin:20px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.5;
  color:var(--tx-2);max-width:62ch}

/* Verfasserzeile */
.a-wer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3vw,36px)}
.a-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.a-wer b{display:block;font-size:14px;font-weight:600}
.a-wer em{display:block;font-style:normal;font-size:12.5px;color:var(--tx-3);margin-top:1px}
.a-strich{width:1px;height:28px;background:var(--linie)}

/* Aufmacherbild */
.a-bild{border-radius:var(--r-gross);overflow:hidden;margin-top:clamp(30px,3.6vw,48px);
  aspect-ratio:21/9;background:var(--grund-2)}
.a-bild img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){ .a-bild{aspect-ratio:16/10} }

/* ---------- Zweispaltiger Satz ---------- */
.a-satz{display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(30px,4vw,64px);padding-bottom:clamp(56px,7vw,100px)}
@media(max-width:980px){ .a-satz{grid-template-columns:1fr} }

/* Inhaltsverzeichnis — klebt mit */
.a-inhalt{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 130px);
  overflow:auto;padding:20px;border-radius:var(--r);background:var(--grund-2)}
.a-inhalt strong{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.a-inhalt ol{list-style:none;margin:0;padding:0;counter-reset:a-i}
.a-inhalt li{counter-increment:a-i;margin-bottom:2px}
.a-inhalt a{display:flex;gap:10px;padding:7px 9px;border-radius:10px;
  font-size:13.5px;line-height:1.35;color:var(--tx-2);transition:background .2s,color .2s}
.a-inhalt a::before{content:counter(a-i,decimal-leading-zero);flex:none;
  font-size:11px;font-weight:700;color:var(--tx-3);padding-top:2px;transition:color .2s}
.a-inhalt a:hover{background:rgba(20,35,59,.05);color:var(--tx)}
.a-inhalt a.hier{background:var(--karte);color:var(--tx);font-weight:500}
.a-inhalt a.hier::before{color:var(--kupfer)}
@media(max-width:980px){ .a-inhalt{position:static;max-height:none} }

/* ---------- Lesetext ---------- */
.a-text{font-size:17px;line-height:1.68;color:#333;max-width:70ch}
.a-text > *{margin:0 0 clamp(18px,1.5vw,24px)}
.a-text h2{font-size:clamp(24px,2.5vw,34px);font-weight:500;line-height:1.22;
  letter-spacing:-.02em;color:var(--tx);
  margin:clamp(42px,4.4vw,62px) 0 clamp(14px,1.2vw,20px);scroll-margin-top:104px}
.a-text h2:first-child{margin-top:0}
.a-text h3{font-size:19px;font-weight:600;margin:clamp(28px,2.6vw,36px) 0 10px;
  scroll-margin-top:104px}
.a-text h4{font-size:16px;font-weight:600;margin:24px 0 8px}
.a-text a{color:var(--kupfer);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(200,130,90,.42);
  transition:text-decoration-color .2s}
.a-text a:hover{text-decoration-color:var(--kupfer)}
.a-text strong{font-weight:600;color:var(--tx)}
.a-text ul,.a-text ol{padding-left:22px}
.a-text li{margin-bottom:9px}
.a-text ul li::marker{color:var(--kupfer)}
.a-text ol li::marker{color:var(--kupfer);font-weight:600}
.a-text table{width:100%;border-collapse:collapse;font-size:15px;
  background:var(--karte);border-radius:14px;overflow:hidden}
.a-text th,.a-text td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linie)}
.a-text th{background:var(--grund-2);font-weight:600;font-size:13.5px}
.a-text tr:last-child td{border-bottom:0}
.a-text blockquote{margin:clamp(28px,3vw,40px) 0;padding:0 0 0 22px;
  border-left:2px solid var(--kupfer);font-size:19px;line-height:1.5;color:var(--tx)}
.a-text figure{margin:clamp(26px,3vw,38px) 0}
.a-text figure img{border-radius:var(--r);width:100%}
.a-text figcaption{margin-top:10px;font-size:13px;color:var(--tx-3)}

/* ---------- Fachkästen ---------- */
.a-text .art-tldr,.a-text .checklist{background:var(--grund-2);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);margin:clamp(26px,2.8vw,36px) 0}
.a-text .art-tldr h4,.a-text .checklist h4{margin:0 0 12px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.a-text .art-tldr ul,.a-text .checklist ul{margin:0;padding:0;list-style:none}
.a-text .art-tldr li,.a-text .checklist li{position:relative;padding-left:26px;margin-bottom:10px;
  font-size:15.5px;line-height:1.55}
.a-text .art-tldr li:last-child,.a-text .checklist li:last-child{margin-bottom:0}
.a-text .art-tldr li::before{content:"";position:absolute;left:2px;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--kupfer)}
.a-text .checklist li::before{content:"";position:absolute;left:1px;top:6px;
  width:10px;height:6px;border-left:2px solid var(--kupfer);border-bottom:2px solid var(--kupfer);
  transform:rotate(-45deg)}

/* Bankersperspektive — dunkle Fläche, die Signatur des Hauses */
.a-text .banker-box{background:var(--nacht);color:rgba(255,255,255,.82);
  border-radius:var(--r);padding:clamp(22px,2.4vw,30px);margin:clamp(28px,3vw,40px) 0}
.a-text .banker-box h4{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kupfer-2)}
.a-text .banker-box h4 svg{width:16px;height:16px;flex:none}
.a-text .banker-box p{margin:0 0 12px;font-size:15.5px;line-height:1.6}
.a-text .banker-box p:last-child{margin-bottom:0}
.a-text .banker-box strong{color:#fff}
.a-text .banker-box a{color:var(--kupfer-2)}

/* Praxis-Tipp — schmale Kupferkante */
.a-text .tip-box{background:rgba(200,130,90,.07);border-left:2px solid var(--kupfer);
  border-radius:0 14px 14px 0;padding:16px 20px;margin:clamp(24px,2.6vw,32px) 0;
  font-size:15.5px;line-height:1.6}
.a-text .tip-box b{color:var(--kupfer)}

/* ---------- Häufige Fragen ---------- */
.a-text .art-faq{margin:clamp(46px,5vw,72px) 0 0}
.a-text .art-faq h2{margin-bottom:clamp(18px,1.8vw,26px)}
.a-text .art-faq details{background:var(--grund-2);border-radius:16px;
  padding:2px 20px;margin-bottom:8px}
.a-text .art-faq summary{list-style:none;cursor:pointer;padding:16px 30px 16px 0;
  position:relative;font-size:16px;font-weight:500;line-height:1.35}
.a-text .art-faq summary::-webkit-details-marker{display:none}
.a-text .art-faq summary::after{content:"";position:absolute;right:4px;top:22px;
  width:9px;height:9px;border-right:1.8px solid var(--tx-3);border-bottom:1.8px solid var(--tx-3);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.a-text .art-faq details[open] summary::after{transform:rotate(225deg);border-color:var(--kupfer)}
.a-text .art-faq details p{margin:0 0 18px;font-size:15.5px;line-height:1.62;color:var(--tx-2)}

/* ---------- Abschluss des Beitrags ---------- */
.a-schluss{margin-top:clamp(44px,5vw,68px);padding-top:clamp(28px,3vw,38px);
  border-top:1px solid var(--linie)}
.a-marken{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,36px)}
.a-marke{padding:6px 13px;border-radius:50px;background:var(--grund-2);
  font-size:12.5px;color:var(--tx-2)}
.a-verfasser{display:flex;gap:20px;align-items:flex-start;background:var(--grund-2);
  border-radius:var(--r);padding:clamp(20px,2.2vw,28px)}
.a-verfasser .a-av{width:60px;height:60px;font-size:17px}
.a-verfasser b{display:block;font-size:17px;font-weight:600}
.a-verfasser em{display:block;font-style:normal;font-size:13px;color:var(--tx-3);margin:2px 0 10px}
.a-verfasser p{margin:0;font-size:15px;line-height:1.6;color:var(--tx-2);max-width:64ch}
@media(max-width:560px){ .a-verfasser{flex-direction:column;gap:14px} }

/* ---------- Weiterlesen ---------- */
.a-weiter{padding:clamp(56px,6vw,88px) 0 clamp(64px,7vw,100px);border-top:1px solid var(--linie)}
.a-weiter .kopfzeile{margin-bottom:clamp(28px,3vw,40px)}

/* ===========================================================================
   Bereichsseiten des Wissensbereichs — Podcast, Presse, Downloads, Circle
   =========================================================================== */

/* ---------- Podcast ---------- */
.pod-pfs{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,34px)}
.pod-pf{display:inline-flex;align-items:center;gap:9px;padding:9px 18px 9px 10px;
  border-radius:50px;background:var(--grund-2);font-size:13.5px;font-weight:500;
  transition:background .22s,transform .2s var(--ease)}
.pod-pf:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.pod-pf .di{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--karte);color:var(--kupfer);transition:background .22s}
.pod-pf:hover .di{background:rgba(255,255,255,.14);color:#fff}
.pod-pf .di svg{width:16px;height:16px}
.preise .pod-pf{background:rgba(255,255,255,.1);color:#fff}
.preise .pod-pf .di{background:rgba(255,255,255,.14);color:var(--kupfer-2)}
.preise .pod-pf:hover{background:rgba(255,255,255,.2)}

.folgen{display:flex;flex-direction:column;gap:2px}
.folge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.2vw,30px);padding:clamp(18px,2vw,26px) clamp(16px,2vw,24px);
  border-radius:16px;transition:background .22s}
.folge:hover{background:var(--grund-2)}
.folge-nr{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--grund-2);font-size:15px;font-weight:700;color:var(--tx-3);
  transition:background .22s,color .22s}
.folge:hover .folge-nr{background:var(--kupfer);color:#fff}
.folge-txt h3{font-size:19px;font-weight:500;margin-bottom:6px}
.folge-txt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--tx-2);max-width:70ch}
.folge-dauer{flex:none;font-size:12.5px;color:var(--tx-3);white-space:nowrap}
@media(max-width:680px){
  .folge{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .folge-dauer{grid-column:2;margin-top:-2px}
  .folge-nr{width:42px;height:42px;font-size:13px}
}

/* ---------- Presse ---------- */
.material{list-style:none;margin:16px 0 0;padding:0}
.material li{position:relative;padding:11px 0 11px 28px;font-size:14.5px;
  border-top:1px solid var(--linie)}
.material li::before{content:"";position:absolute;left:4px;top:17px;
  width:10px;height:6px;border-left:1.8px solid var(--kupfer);
  border-bottom:1.8px solid var(--kupfer);transform:rotate(-45deg)}
.oton{margin:0;background:var(--grund-2);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:18px}
.oton blockquote{margin:0;font-size:18px;line-height:1.45;color:var(--tx);
  letter-spacing:-.015em}
.oton blockquote::before{content:"„";display:block;font-size:38px;line-height:.6;
  color:var(--kupfer);margin-bottom:10px}
.oton figcaption{margin-top:auto;font-size:13px}
.oton figcaption b{display:block;font-weight:600}
.oton figcaption span{color:var(--tx-3)}

/* ---------- Downloads ---------- */
/* Kartenformat der Live-Seite: 16:9-Vorschaufeld über dem Text, Typ-Chip,
   Knopf am Kartenfuß. Hier auf hellem Grund — nur das Vorschaufeld bleibt
   dunkel, das trägt den Kontrast der Vorlage. */
.dl-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:1080px){ .dl-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:680px){ .dl-raster{grid-template-columns:1fr} }

.dl{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--grund-2);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.dl:hover{transform:translateY(-5px);box-shadow:0 30px 64px -34px rgba(20,35,59,.55)}

/* Vorschaufeld */
.dl-feld{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 100% at 20% 0%,rgba(200,130,90,.2),transparent 60%),
             linear-gradient(150deg,#252930 0%,#14171b 100%)}
.dl-feld.video{background:radial-gradient(120% 110% at 78% 12%,rgba(200,130,90,.32),transparent 62%),
             linear-gradient(150deg,#20242a 0%,#101317 100%)}
.dl-feld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--kupfer),transparent);opacity:.55}
.dl-feld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 16%;transition:transform .5s var(--ease)}
.dl:hover .dl-feld img{transform:scale(1.04)}
.dl-feld.mit-bild.video::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 50% 50%,rgba(10,12,15,.66) 0%,rgba(10,12,15,.12) 34%,transparent 52%),
             linear-gradient(180deg,rgba(10,12,15,.12) 0%,rgba(10,12,15,.6) 100%)}
.dl-sym{color:rgba(255,255,255,.5)}
.dl-sym svg{width:44px;height:44px}
.dl-play{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:rgba(200,130,90,.92);color:#fff;
  box-shadow:0 12px 30px -10px rgba(200,130,90,.8);transition:transform .3s var(--ease)}
.dl-play svg{width:20px;height:20px;margin-left:3px}
.dl:hover .dl-play{transform:scale(1.08)}

/* Textteil */
.dl-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,24px)}
.dl-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:50px;margin-bottom:14px;
  background:rgba(200,130,90,.12);color:#a5613c;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.dl-chip svg{width:13px;height:13px;flex:none}
.dl-zert{display:inline-flex;align-self:flex-start;align-items:center;
  padding:6px 10px;border-radius:11px;margin:-6px 0 14px;
  background:rgba(200,130,90,.09);border:1px solid rgba(200,130,90,.24)}
.dl-zert img{height:24px;width:auto}
.dl-body h3{font-size:19px;font-weight:500;line-height:1.28;letter-spacing:-.015em}
.dl-body p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.dl-meta{margin:16px 0 20px;font-size:12.5px;color:var(--tx-3)}
.dl-body .knopf{margin-top:auto;justify-content:space-between}

/* ---------- Circle: Tarife ---------- */
/* Ergänzt die bestehende helle .preis-Karte um Betrag, Hinweis und Hervorhebung. */
.preis{position:relative}
.preis-marke{position:absolute;top:-11px;left:24px;padding:4px 12px;border-radius:50px;
  background:var(--kupfer);color:#fff;font-size:11px;font-weight:600}
.preis-was{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--tx-2)}
.preis-zahl{display:flex;align-items:baseline;gap:8px;margin:22px 0 4px}
.preis-zahl b{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.03em;color:var(--tx)}
.preis-zahl span{font-size:14px;color:var(--tx-3)}
.preis-fein{margin:0 0 20px;font-size:12.5px;color:var(--tx-3)}
.preis li.fehlt{color:var(--tx-3);opacity:.6}
.preis li.fehlt::before{background:var(--tx-3);opacity:.5;
  -webkit-mask-image:none;mask-image:none;width:9px;height:1.5px;border-radius:1px;top:16px;left:3px}
.preis.hebt{outline:2px solid var(--kupfer);outline-offset:-2px}
.preis .knopf{align-self:stretch;justify-content:space-between}

/* Zwei Karten nebeneinander brauchen die Mindesthöhe der Dreierreihe nicht. */
.zwei .schritt{min-height:0}


/* ---------- Freischalt-Dialog ---------- */
.gate-schirm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
  background:rgba(11,17,28,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:gate-ein .22s ease both;overflow-y:auto}
.gate-schirm[hidden]{display:none}
@keyframes gate-ein{from{opacity:0}to{opacity:1}}
.gate{position:relative;width:min(520px,100%);border-radius:var(--r-gross);overflow:hidden;
  background:var(--grund);box-shadow:0 50px 110px -40px rgba(0,0,0,.7);
  animation:gate-auf .34s cubic-bezier(.2,.9,.28,1) both}
@keyframes gate-auf{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.gate::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--kupfer),var(--kupfer-2),var(--kupfer))}
.gate-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(20,35,59,.07);color:var(--tx-2);
  transition:background .2s,transform .25s var(--ease)}
.gate-x:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}
.gate-x svg{width:15px;height:15px}
.gate-kopf{padding:30px 30px 22px;border-bottom:1px solid var(--linie)}
.gate-marke{display:inline-block;padding:5px 12px;border-radius:50px;margin-bottom:14px;
  background:rgba(200,130,90,.12);color:#a5613c;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gate-kopf h3{font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.gate-kopf p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.gate-form{padding:24px 30px 30px;display:flex;flex-direction:column;gap:14px}
/* Ohne diese Zeile schlägt display:flex das hidden-Attribut und das Formular
   bliebe nach dem Absenden stehen. */
.gate-form[hidden]{display:none}
.gate-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:460px){ .gate-reihe{grid-template-columns:1fr} }
.gate-form label{display:flex;flex-direction:column;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--tx-2)}
.gate-form input[type=text],.gate-form input[type=email]{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--linie-2);
  background:var(--karte);font-family:inherit;font-size:15px;color:var(--tx);
  transition:border-color .2s,box-shadow .2s}
.gate-form input:focus{outline:0;border-color:var(--kupfer);
  box-shadow:0 0 0 3px rgba(200,130,90,.16)}
.gate-haken{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13.5px;
  line-height:1.5;color:var(--tx-2)}
.gate-haken input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--kupfer)}
.gate-haken a{color:var(--kupfer);text-decoration:underline;text-underline-offset:2px}
.gate-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.gate-fehler{margin:0;padding:11px 14px;border-radius:11px;font-size:13.5px;
  background:rgba(208,113,74,.12);color:#a24f2c}
.gate-los{width:100%;justify-content:space-between;margin-top:4px;padding:10px 10px 10px 20px;
  font-size:14px}
.gate-los:disabled{opacity:.6;cursor:wait}
.gate-fertig{padding:30px 26px 34px}
.gate-fertig > b{font-size:21px}
.gate-fertig p span{color:var(--tx);font-weight:500}
@media(prefers-reduced-motion:reduce){
  .gate-schirm,.gate{animation:none}
  .gate-x:hover{transform:none}
}


/* ===========================================================================
   Projekte — Aufbau nach der Fallstudien-Seite der Vorlage
   =========================================================================== */
.pj-kopf{padding:calc(90px + clamp(36px,4.4vw,64px)) 0 clamp(26px,3vw,40px)}
.pj-kopf-satz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,3vw,56px);align-items:end;margin-top:6px}
@media(max-width:900px){ .pj-kopf-satz{grid-template-columns:1fr;align-items:start;gap:22px} }
.pj-kopf h1{font-size:clamp(38px,5.2vw,74px);font-weight:500;line-height:1.05;
  letter-spacing:-.03em}
.pj-ergebnis{margin:16px 0 0;font-size:clamp(18px,1.9vw,25px);line-height:1.3;
  color:var(--tx-2);max-width:24ch;letter-spacing:-.02em}
.pj-lbl{display:block;margin-bottom:10px;font-size:12.5px;color:var(--tx-3)}
.pj-chips{display:flex;flex-wrap:wrap;gap:8px}
.pj-chip{display:inline-block;padding:7px 14px;border-radius:50px;
  background:var(--grund-2);font-size:12.5px;font-weight:500;color:var(--tx-2)}

/* Bild und Kennzahlen in einem gemeinsamen Rahmen — wie in der Vorlage */
.pj-rahmen{border-radius:var(--r-gross);padding:8px;
  background:linear-gradient(158deg,#fbfcfe,#f0f4f8);
  border:1px solid rgba(20,35,59,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 26px 60px -40px rgba(20,35,59,.45)}
.pj-bild{border-radius:calc(var(--r-gross) - 8px);overflow:hidden;aspect-ratio:21/9;
  background:var(--grund-2)}
.pj-bild img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){ .pj-bild{aspect-ratio:16/10} }
.pj-kzleiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:520px){ .pj-kzleiste{grid-template-columns:1fr} }
/* Bei nur zwei Werten bekommen sie mehr Raum und größere Ziffern. */
.pj-kzleiste:has(.pj-kz:nth-child(2):last-child) .pj-kz{padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px)}
.pj-kzleiste:has(.pj-kz:nth-child(2):last-child) .pj-kz b{font-size:clamp(30px,3.6vw,50px)}
.pj-kz{padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);
  border-left:1px solid var(--linie);display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.pj-kz:first-child{border-left:0}
.pj-kz span{font-size:13px;color:var(--tx-3)}
.pj-kz b{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1}
.pj-kz-offen{padding:clamp(18px,2vw,24px);font-size:13.5px;line-height:1.55;color:var(--tx-3)}

/* Über das Projekt */
.pj-abschnitt{margin:0 0 clamp(24px,2.6vw,34px);padding-bottom:14px;
  border-bottom:1px solid var(--linie);font-size:17px;font-weight:500;letter-spacing:-.015em}
.pj-ueber{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(20px,3vw,48px);
  margin-bottom:clamp(30px,3.4vw,48px)}
.pj-ueber.zwei-felder{grid-template-columns:180px minmax(0,1fr)}
@media(max-width:700px){ .pj-ueber,.pj-ueber.zwei-felder{grid-template-columns:1fr;gap:18px} }
.pj-feld b{display:block;font-size:16px;font-weight:500}
.pj-kurz p{margin:0;font-size:clamp(18px,1.9vw,26px);line-height:1.35;letter-spacing:-.02em;
  color:var(--tx);max-width:34ch}

/* Projektkarten (Übersicht und „Weitere Projekte") */
.pj-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1000px){ .pj-raster{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .pj-raster{grid-template-columns:1fr} }
.pj-karte{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(158deg,#fdfefe,#f1f5f9);
  border:1px solid rgba(20,35,59,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 36px -28px rgba(20,35,59,.38);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pj-karte:hover{transform:translateY(-5px);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 60px -32px rgba(20,35,59,.5)}
.pj-karte-bild{aspect-ratio:16/10;overflow:hidden;background:var(--grund-2)}
.pj-karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pj-karte:hover .pj-karte-bild img{transform:scale(1.04)}
.pj-karte-txt{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1}
.pj-karte-txt .pj-chip{align-self:flex-start;margin-bottom:12px;background:rgba(20,35,59,.06)}
.pj-karte-txt h3{font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.02em}
.pj-karte-txt p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.pj-mehr{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13px;font-weight:500;color:var(--kupfer)}
.pj-mehr .kreis{width:28px;height:28px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:rgba(200,130,90,.14);color:var(--kupfer);
  transition:transform .25s var(--ease),background .25s}
.pj-mehr .kreis svg{width:12px;height:12px}
.pj-karte:hover .pj-mehr .kreis{transform:rotate(45deg);background:var(--kupfer);color:#fff}
@media(prefers-reduced-motion:reduce){
  .pj-karte:hover{transform:none}
  .pj-karte:hover .pj-karte-bild img{transform:none}
  .pj-karte:hover .pj-mehr .kreis{transform:none}
}


/* Projekt: Bildergalerie, Ausgangslage und Ergebnis
   Muster der Vorlage: Label links, Inhalt rechts — großer Satz, dann Fließtext
   bzw. Punkte. Dazwischen ein breites Bild. */
.pj-galerie{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){ .pj-galerie{grid-template-columns:1fr} }
.pj-g{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--grund-2)}
.pj-g img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-g:hover img{transform:scale(1.03)}

.pj-breit{border-radius:var(--r-gross);overflow:hidden;aspect-ratio:21/9;background:var(--grund-2)}
.pj-breit img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){ .pj-breit{aspect-ratio:16/10} }

.pj-block{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(20px,3vw,48px);
  align-items:start}
@media(max-width:760px){ .pj-block{grid-template-columns:1fr;gap:14px} }
.pj-block-lbl{font-size:14px;color:var(--tx-2);padding-top:6px}
.pj-block-txt{max-width:64ch}
.pj-satz{font-size:clamp(24px,2.7vw,38px);font-weight:500;line-height:1.22;
  letter-spacing:-.025em;color:var(--tx);margin-bottom:20px;max-width:22ch}
.pj-block-txt p{margin:0;font-size:16px;line-height:1.65;color:var(--tx-2)}
.pj-punkte{list-style:none;margin:0;padding:0}
.pj-punkte li{position:relative;padding:12px 0 12px 30px;font-size:16px;line-height:1.6;
  color:var(--tx-2);border-top:1px solid var(--linie)}
.pj-punkte li:first-child{border-top:0}
.pj-punkte li::before{content:"";position:absolute;left:2px;top:20px;width:11px;height:6px;
  border-left:2px solid var(--kupfer);border-bottom:2px solid var(--kupfer);
  transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){ .pj-g:hover img{transform:none} }

/* Projekt-Kontext: Faktenreihe + Quellenangabe */
.pj-fakten{margin-top:clamp(22px,2.6vw,34px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.6vw,22px)}
.pj-fakt{min-width:0;padding:18px 18px 20px;border-radius:var(--r);
  background:var(--karte-2);border:1px solid rgba(20,35,59,.09)}
.pj-fakt b{display:block;font-size:clamp(20px,2.1vw,26px);font-weight:600;
  letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.pj-fakt span{display:block;margin-top:9px;font-size:14px;line-height:1.45;color:var(--tx3,#5d6b80)}
.pj-quelle{margin-top:clamp(16px,1.8vw,22px);font-size:13.5px;line-height:1.55;
  color:var(--tx3,#6b7789)}
@media(max-width:520px){ .pj-fakten{grid-template-columns:1fr} }
@media(max-width:700px){ .pj-g.hoch{aspect-ratio:3/4} }
@media(max-width:700px){ .pj-breit.schmalfassung{aspect-ratio:9/10} }