/* Integration only; canonical stylesheet and legal pages stay byte-identical. */
[hidden]{display:none!important}
.integrated-hero{--muted:#59645d;--forest:#193e35;--radius:18px;align-items:start}
.integrated-hero h1{margin-bottom:0}.integrated-hero .hero-description{max-width:460px;color:var(--ink)}
.integrated-hero .hero-facts{margin-top:22px}
.integrated-hero .system-toolbar .eyebrow{margin:0}.integrated-hero .button span{font-size:15px}
.integrated-hero .system-experience{scroll-margin-top:24px}.integrated-hero .scenario-copy article[hidden]{display:none!important}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.055em}
.pj-frame{touch-action:pan-y pinch-zoom}
.pj-art-real{background:#e3e8d7;min-height:400px;padding:32px 20px;display:flex;align-items:center}
.pj-art-real img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 15px 28px #102b2425;object-fit:contain}
.pj-art-real:before{display:none}.pj-info.reference-body{padding:36px 32px}.pj-info .field-tags{flex-wrap:wrap}.pj-info h3{margin:10px 0 18px}.pj-info .project-link{margin-top:24px}
.pj-section .pj-heading h2{margin:0}.pj-choices{flex-wrap:wrap}.pj-info .reference-meta{line-height:1.6}
.pj-controls svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){.pj-art-real{min-height:0;padding:24px 18px}.pj-info.reference-body{padding:28px 24px}.integrated-hero .hero-actions .button{min-width:0}.integrated-hero h1{white-space:normal}}
/* Kombination 31.10.: j.-Bühne auf der dunklen Systemkarte, die Systemkarte selbst in „Was ich kann“ */
.integrated-hero .system-stage.morph-stage{background:#183a35;background-image:radial-gradient(circle at 50% 48%,#2a5a4c 0,transparent 62%),radial-gradient(#82918a30 .7px,transparent .7px);background-size:auto,18px 18px;border-radius:var(--radius);box-shadow:0 24px 50px #10292326}
.integrated-hero .morph-coordinate,.integrated-hero .morph-bottom{color:#b6c9bd}
.integrated-hero .morph-coordinate{left:22px;top:22px}.integrated-hero .morph-bottom{left:22px;right:22px;bottom:20px}
.integrated-hero .morph-cross{position:absolute;top:13px;right:20px;z-index:2;font:26px monospace;color:var(--lime)}
.fields-visual{margin-top:46px;max-width:520px}
@media(max-width:800px){.integrated-hero .morph-coordinate{left:14px;top:16px}.integrated-hero .morph-bottom{left:14px;right:14px;bottom:14px}.fields-visual{max-width:560px;margin-top:34px}}
/* Projektknöpfe am Handy: eine Zeile zum Wischen, bis an den Bildschirmrand (31.10.) */
@media(max-width:800px){.pj-controls{flex-direction:column;align-items:stretch;gap:16px}
.pj-choices{position:relative;align-self:stretch;min-width:0;width:calc(100% + 48px);flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin:-8px -24px;padding:8px 24px;scroll-padding-inline:24px}
.pj-choices::-webkit-scrollbar{display:none}
.pj-choice{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}}
@media(max-width:600px){.pj-choices{width:calc(100% + 40px);margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}}
@media(max-width:360px){.pj-choices{width:calc(100% + 32px);margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}}
@media(max-width:600px){.fields-visual{margin-top:28px}.fields-intro h2,.fields-intro>p{max-width:none}}
@media(max-width:600px){.pj-art-real{padding:20px 14px}.pj-info.reference-body{padding:25px 22px}.pj-info h3{font-size:29px}.pj-info .reference-meta{font-size:9px}.pj-controls{align-items:flex-start}.integrated-hero .hero-description{font-size:18px}}