/* A005 V12: daylight, quiet paper surfaces and the approved dark cinema as contrast. */
html[data-ts-integration] #hero{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);grid-template-areas:"copy visual";gap:clamp(32px,5vw,84px);align-items:center;width:min(1400px,100%);margin:auto;padding:58px clamp(24px,4vw,56px) 82px;height:auto;min-height:740px;max-height:none;overflow:visible;background:#f7f5f0;isolation:isolate}
html[data-ts-integration] #hero .hero-overlay,html[data-ts-integration] #hero .hero-overlay>.wrap,html[data-ts-integration] #hero .hero-copy{display:contents;max-width:none;background:none;text-shadow:none}
html[data-ts-integration] #hero .v12-hero-words{grid-area:copy;position:relative;z-index:2;padding:16px 0;min-width:0;color:#172638}
html[data-ts-integration] #hero h1{font-family:Inter,Arial,sans-serif;font-size:clamp(43px,4.7vw,70px);line-height:1.04;font-weight:600;letter-spacing:-.052em;color:#172638;max-width:13ch;margin:22px 0 26px;text-wrap:balance;overflow-wrap:normal}
html[data-ts-integration] #hero .overline{color:#8f4c27;font-size:11px;font-weight:600;letter-spacing:.16em;max-width:34ch}
html[data-ts-integration] #hero .lead{color:#495a68;font-size:clamp(17px,1.5vw,20px);line-height:1.65;max-width:43ch;margin:0 0 30px}
html[data-ts-integration] #hero .hero-actions{flex-wrap:wrap;gap:16px 24px;margin:0 0 22px}
html[data-ts-integration] #hero .hero-actions .btn-primary{color:#fffefa;background:#172638;border:1px solid #172638;border-radius:50px;font-size:15px;font-weight:600;min-height:56px;padding:16px 26px;box-shadow:0 10px 26px -17px #17263885}
html[data-ts-integration] #hero .hero-actions .btn-primary:hover{background:#2e465c;border-color:#2e465c;box-shadow:0 15px 26px -16px #17263880}
html[data-ts-integration] #hero .hero-copy .link-arrow{color:#172638;font-size:14px;border-color:transparent}
html[data-ts-integration] #hero .hero-copy .link-arrow:hover{border-color:#8f4c27}
html[data-ts-integration] #hero .hero-fineprint{color:#596775;font-size:11px;line-height:1.65;max-width:51ch}
html[data-ts-integration] #hero .hero-bg{grid-area:visual;position:relative;inset:auto;z-index:0;align-self:stretch;width:100%;min-height:610px;height:100%;max-height:780px;border:1px solid #c6d0d6;border-radius:32px 100px 32px 32px;overflow:hidden;transform:none!important;will-change:auto;background:#dfeaf2;box-shadow:0 32px 70px -42px #17263868,0 1px 0 #fff inset;filter:none}
html[data-ts-integration] #hero .hero-bg:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#dfecf608 15%,#e9c6a31f 48%,#efe7db73 100%);box-shadow:inset 0 0 0 1px #fff8}
html[data-ts-integration] #hero .hero-bg picture{display:block;width:100%;height:100%;transform:perspective(1200px) rotateX(var(--v12-rx,0deg)) rotateY(var(--v12-ry,0deg)) scale(1.07);transform-origin:center;transition:transform 450ms cubic-bezier(.22,.61,.36,1)}
html[data-ts-integration] #hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:66% 50%}
html[data-ts-integration] #hero>.ki-mark{grid-area:visual;position:relative;align-self:start;justify-self:start;top:auto;right:auto;bottom:auto;z-index:3;margin:20px;max-width:calc(100% - 40px);padding:6px 10px;border:1px solid #acb6c0;background:#fffefaef;border-radius:20px;color:#334756;font-size:10px;line-height:1.4}
html[data-ts-integration] #hero .ts-folder{grid-area:visual;z-index:2;position:relative;align-self:end;justify-self:center;width:min(350px,calc(100% - 44px));max-width:none;margin:0 0 30px;padding:20px 20px 16px;background:linear-gradient(130deg,#fffefaed,#e7eef4f2);border:1px solid #fff9;border-radius:20px;box-shadow:0 24px 48px -25px #17263870,0 1px 0 #fff inset;color:#172638;backdrop-filter:blur(12px)}
html[data-ts-integration] #hero .ts-folder-note{color:#526574;font-size:11px;letter-spacing:.02em}
html[data-ts-integration] #hero .ts-folder-scene{height:330px}
html[data-ts-integration] #hero .ts-folder-read{border:1px solid #a3b0b8;border-radius:30px;background:#fffefa;color:#172638;padding:12px 16px;text-decoration:none;font-size:13px}
html[data-ts-integration] #hero .ts-folder-read:hover{background:#edf2f5;box-shadow:none}
html[data-ts-integration] #hero :focus-visible{outline-color:#8f4c27;outline-offset:4px}
/* The dark sequence stays the confirmed V11 scene. A light rim separates it from daylight. */
html[data-ts-integration] #so-funktioniert{border-top:1px solid #e2d1bc;border-bottom:1px solid #c6d3de}
html[data-ts-integration] #schritte{background:#fffefa;padding:110px 0 96px}
html[data-ts-integration] #schritte>.wrap{row-gap:30px}
html[data-ts-integration] #schritte .section-head{max-width:780px;margin-bottom:18px}
html[data-ts-integration] #schritte .section-head h2{font-family:Inter,Arial,sans-serif;letter-spacing:-.047em;font-weight:600;max-width:18ch;font-size:clamp(34px,4.8vw,64px);line-height:1.08}
html[data-ts-integration] #schritte .section-head .lead{color:#596b78;font-size:18px;max-width:48ch;line-height:1.6}
html[data-ts-integration] #schritte .steps-list{gap:0;margin-top:20px;border-top:1px solid #b3bfc7;border-bottom:1px solid #b3bfc7}
html[data-ts-integration] #schritte .step{position:relative;border:0;padding:30px 30px 38px;min-width:0;background:transparent}
html[data-ts-integration] #schritte .step+.step{border-left:1px solid #b3bfc7}
html[data-ts-integration] #schritte .step-num{display:block;border:0;width:auto;height:auto;font-size:58px;line-height:1;font-weight:400;letter-spacing:-.055em;margin:0 0 30px;color:#9b6843;background:none;border-radius:0}
html[data-ts-integration] #schritte .step:nth-child(even) .step-num{color:#526f85}
html[data-ts-integration] #schritte .step h3{font-size:23px;letter-spacing:-.025em;margin-bottom:14px}
html[data-ts-integration] #schritte .step p{font-size:14px;line-height:1.7;color:#526575}
html[data-ts-integration] #schritte .steps-foot{font-size:13px;line-height:1.7;max-width:84ch;color:#526575;margin-top:0}
/* The original report is a broad light editorial spread, not another dark stage. */
html[data-ts-integration] #schritte .ts-story{margin-top:58px;padding:clamp(26px,4vw,58px);border:1px solid #c3cbd0;border-radius:30px;background:radial-gradient(ellipse at 0 0,#f2dfc8a6,transparent 55%),linear-gradient(135deg,#f6f5f0,#e5edf3);box-shadow:0 25px 70px -60px #17263870}
html[data-ts-integration] .ts-story-head{max-width:770px;gap:12px}
html[data-ts-integration] .ts-story-head h3{font-size:clamp(32px,3.6vw,49px);letter-spacing:-.045em;line-height:1.1}
html[data-ts-integration] .ts-story-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#8f4c27}
html[data-ts-integration] .ts-story-note{font-size:14px;color:#526575;line-height:1.6}
html[data-ts-integration] .ts-story-nav{gap:10px;margin:30px 0 40px;flex-wrap:wrap}
html[data-ts-integration] .ts-story-nav a{border:1px solid #a8b6bf;border-radius:30px;padding:10px 18px;font-size:13px;font-weight:500;background:#fffefa80}
html[data-ts-integration] .ts-story-nav a[aria-current=step]{background:#172638;color:#fffefa;border-color:#172638;font-weight:500}
html[data-ts-integration] .ts-story-grid{gap:clamp(30px,5vw,70px)}
html[data-ts-integration] .ts-story-card{background:#fffefa;border:1px solid #aab5bb;border-top:1px solid #aab5bb;border-radius:7px;box-shadow:5px 7px 0 -1px #f6f4ee,5px 7px 0 0 #b8c2c9,0 30px 50px -30px #1726385c}
html[data-ts-integration] .ts-story-action{border-radius:30px;font-size:13px;background:#fffefa}
html[data-ts-integration] .ts-story-action.ts-story-open{background:#172638;color:#fffefa;border-color:#172638}
html[data-ts-integration] .ts-story-mapping li{border-color:#acbac4;padding:15px 0}
/* Large photographs with separate light captions. The existing gallery model stays intact. */
html[data-ts-integration] #galerie{background:#f7f5f0;padding:40px 0 85px}
html[data-ts-integration] #galerie .gallery-eyebrow{padding-top:35px;margin-bottom:32px;font-size:13px;letter-spacing:.13em;color:#775338}
html[data-ts-integration] #galerie .gallery-wrap{padding-bottom:0}
html[data-ts-integration] #galerie .gallery-track{gap:26px;padding-top:8px;padding-bottom:28px;scroll-padding-inline:max(24px,calc((100vw - 1280px)/2 + 24px))}
html[data-ts-integration] #galerie .gallery-card{width:min(510px,78vw);height:560px;flex:0 0 min(510px,78vw);border:1px solid #c1cbd0;border-radius:26px;overflow:hidden;background:#fffefa;box-shadow:0 18px 35px -30px #17263860;transition:box-shadow 240ms ease}
html[data-ts-integration] #galerie .gallery-card__img{flex:1 1 auto;min-height:0;height:360px}
html[data-ts-integration] #galerie .gallery-card__img picture{display:block;width:100%;height:100%;transition:transform 650ms cubic-bezier(.22,.61,.36,1)}
html[data-ts-integration] #galerie .gallery-card__img img{height:100%;object-fit:cover}
html[data-ts-integration] #galerie .gallery-card__panel{position:relative;flex:0 0 auto;min-height:176px;background:#fffefa;padding:25px 28px;gap:12px;border-top:1px solid #d6dadd;color:#172638}
html[data-ts-integration] #galerie .gallery-card__panel h3{color:#172638;font-size:25px;letter-spacing:-.035em;line-height:1.15;max-width:17ch}
html[data-ts-integration] #galerie .gallery-card__panel p{color:#526575;font-size:13px;line-height:1.6;padding-right:34px}
html[data-ts-integration] #galerie .gallery-card__arrow{position:absolute;right:22px;bottom:24px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #b0bcc5;border-radius:50%;color:#172638;background:#f3eee5}
html[data-ts-integration] #galerie .gallery-card__preview{color:#172638;border-color:#869aaa;align-self:flex-start;min-height:32px}
html[data-ts-integration] #galerie .gallery-card:focus-visible{outline:3px solid #8f4c27;outline-offset:3px}
html[data-ts-integration] #galerie .gallery-controls{margin-top:15px}
html[data-ts-integration] #galerie .gallery-btn{border-radius:50%;width:48px;height:48px;background:#fffefa;border-color:#a6b5bf;color:#172638}
html[data-ts-integration] #galerie .gallery-btn:hover{background:#172638;color:#fffefa}
html[data-ts-integration] .gallery-lightbox{border-radius:24px;border-color:#b0bec8;background:#fffefa;box-shadow:0 40px 110px #0c1c2c55}
@media(hover:hover) and (pointer:fine){html[data-ts-integration] #galerie .gallery-card:hover{box-shadow:0 26px 38px -26px #17263855}html[data-ts-integration] #galerie .gallery-card:hover .gallery-card__img picture{transform:scale(1.045)}}
@media(max-width:1100px){html[data-ts-integration] #hero{gap:34px;padding-inline:30px}html[data-ts-integration] #hero h1{font-size:clamp(44px,5.4vw,60px)}html[data-ts-integration] #hero .ts-folder{padding-inline:12px;width:calc(100% - 30px)}html[data-ts-integration] #schritte .step{padding:28px 22px}}
@media(max-width:959px){html[data-ts-integration] #hero{grid-template-columns:1fr;grid-template-areas:"copy" "visual";min-height:0;padding:42px 30px 60px;gap:34px}html[data-ts-integration] #hero .v12-hero-words{max-width:720px}html[data-ts-integration] #hero h1{font-size:clamp(45px,7vw,68px);max-width:17ch}html[data-ts-integration] #hero .hero-bg{min-height:500px;height:500px;max-height:none;border-radius:28px 70px 28px 28px}html[data-ts-integration] #hero .hero-bg img{object-position:50% 60%}html[data-ts-integration] #hero .ts-folder{width:330px;max-width:calc(100% - 40px);justify-self:end;margin:0 24px 24px}html[data-ts-integration] #hero .ts-folder-scene{height:300px}html[data-ts-integration] #schritte .step:nth-child(3){border-left:0}html[data-ts-integration] #schritte .step:nth-child(n+3){border-top:1px solid #b3bfc7}html[data-ts-integration] #schritte{padding:80px 0}.ts-story{overflow:visible}}
@media(max-width:639px){html[data-ts-integration] #hero{padding:26px 20px 44px;gap:26px}html[data-ts-integration] #hero h1{font-size:clamp(39px,10.5vw,58px);line-height:1.06;letter-spacing:-.045em;max-width:15ch;margin:18px 0 22px}html[data-ts-integration] #hero .hero-copy .lead{font-size:17px;line-height:1.6;margin-bottom:24px}html[data-ts-integration] #hero .hero-lead-more{display:inline}html[data-ts-integration] #hero .hero-fineprint{font-size:11px}html[data-ts-integration] #hero .hero-actions{gap:12px 20px}html[data-ts-integration] #hero .hero-bg{min-height:470px;height:470px;border-radius:22px 60px 22px 22px}html[data-ts-integration] #hero .hero-bg img{object-position:68% 50%}html[data-ts-integration] #hero .ts-folder{justify-self:center;width:290px;max-width:calc(100% - 24px);margin:0 0 16px;padding:14px 14px 12px}html[data-ts-integration] #hero .ts-folder-scene{height:285px}html[data-ts-integration] #hero>.ki-mark{margin:14px;font-size:9px;max-width:calc(100% - 28px)}html[data-ts-integration] #schritte{padding:62px 0}html[data-ts-integration] #schritte .section-head .lead{font-size:16px}html[data-ts-integration] #schritte .steps-list{grid-template-columns:1fr}html[data-ts-integration] #schritte .step{padding:25px 0 28px 70px}html[data-ts-integration] #schritte .step+.step{border-left:0;border-top:1px solid #b3bfc7}html[data-ts-integration] #schritte .step-num{position:absolute;left:0;top:27px;font-size:46px}html[data-ts-integration] #schritte .step h3{font-size:23px;margin-bottom:9px}html[data-ts-integration] #schritte .ts-story{margin-top:34px;padding:26px 18px;border-radius:20px}html[data-ts-integration] .ts-story-nav{gap:7px;margin-bottom:28px}html[data-ts-integration] .ts-story-nav a{font-size:11px;padding:9px 12px}html[data-ts-integration] .ts-story-card{padding:16px}html[data-ts-integration] #galerie{padding-top:18px;padding-bottom:50px}html[data-ts-integration] #galerie .gallery-track{gap:16px}html[data-ts-integration] #galerie .gallery-card{width:84vw;flex-basis:84vw;height:490px;border-radius:20px}html[data-ts-integration] #galerie .gallery-card__panel{padding:22px;min-height:174px}html[data-ts-integration] #galerie .gallery-card__panel h3{font-size:24px}html[data-ts-integration] #galerie .gallery-card__arrow{right:15px;bottom:18px}}
html[data-ts-opaque=true] #hero .ts-folder{background:#f8f7f1;backdrop-filter:none}html[data-ts-opaque=true] #hero .hero-bg:after{display:none}html[data-ts-opaque=true] #hero>.ki-mark{background:#fffefa}html[data-ts-opaque=true] #schritte .ts-story{background:#edf0f1}
@media(prefers-reduced-motion:reduce){html[data-ts-integration] #hero .hero-bg picture,html[data-ts-integration] #galerie .gallery-card__img picture{transform:none!important;transition:none!important}}
html[data-ts-motion=reduced] #hero .hero-bg picture,html[data-ts-motion=reduced] #galerie .gallery-card__img picture{transform:none!important;transition:none!important}
@media(forced-colors:active){html[data-ts-integration] #hero,html[data-ts-integration] #hero .v12-hero-words,html[data-ts-integration] #schritte,html[data-ts-integration] #galerie,html[data-ts-integration] #schritte .ts-story,html[data-ts-integration] #hero .ts-folder,html[data-ts-integration] #galerie .gallery-card__panel{background:Canvas;color:CanvasText}html[data-ts-integration] #hero h1,html[data-ts-integration] #hero .lead,html[data-ts-integration] #hero .overline,html[data-ts-integration] #hero .hero-fineprint,html[data-ts-integration] #hero .ts-folder-note,html[data-ts-integration] #galerie .gallery-card__panel h3,html[data-ts-integration] #galerie .gallery-card__panel p{color:CanvasText}html[data-ts-integration] #hero .hero-bg:after{display:none}html[data-ts-integration] #hero .ts-folder,html[data-ts-integration] #schritte .ts-story,html[data-ts-integration] #galerie .gallery-card{border:1px solid CanvasText;box-shadow:none}html[data-ts-integration] #hero .hero-actions .btn-primary,html[data-ts-integration] .ts-story-action.ts-story-open{background:ButtonFace;color:ButtonText;border-color:ButtonText}}
/* Deliberately supersede the inherited .hero{padding:0!important} correction. */
html[data-ts-integration] #hero{padding:58px clamp(24px,4vw,56px) 82px!important}
@media(max-width:1100px){html[data-ts-integration] #hero{padding-inline:30px!important}}
@media(max-width:959px){html[data-ts-integration] #hero{padding:42px 30px 60px!important}}
@media(max-width:639px){html[data-ts-integration] #hero{padding:26px 20px 44px!important}}
/* Preserve the approved cinema's light controls against global light-theme roles. */
html[data-ts-integration] #so-funktioniert .cin-controls input[type=range]{accent-color:#edc9a6}
html[data-ts-integration] #so-funktioniert :focus-visible{outline-color:#f5caa3}
html[data-ts-integration] #hero h1{hyphens:auto;overflow-wrap:anywhere}
@media(max-width:389px){html[data-ts-integration] #hero h1{font-size:36px}}
@media(forced-colors:active){html[data-ts-integration] #so-funktioniert :focus-visible{outline-color:Highlight}html[data-ts-integration] #so-funktioniert .cin-controls input[type=range]{accent-color:Highlight}}