/* Website-native, vector-sharp DIN-lang fold. No rasterized text or external embeds. */
.letter-showcase{background:#203c34;color:#f8f9f1;padding:100px 0;scroll-margin-top:76px;overflow:hidden}
.letter-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.3fr);gap:64px;align-items:center}
.letter-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:#dfff62;margin:0 0 24px}
.letter-copy h2{font-size:clamp(36px,3.5vw,55px);line-height:1.08;letter-spacing:-.055em;margin:0;max-width:520px}
.letter-copy h2 em{font-style:normal;color:#e2ff54}
.letter-intro{font-size:16px;line-height:1.65;color:#c8d3cb;max-width:420px;margin:24px 0 30px}
.letter-steps{padding:0;margin:0 0 32px;list-style:none;display:grid;gap:21px}
.letter-steps li{display:flex;gap:16px;align-items:flex-start}
.letter-steps li>span{font-size:11px;font-weight:700;color:#dfff62;padding-top:5px}
.letter-steps strong{font-size:16px}.letter-steps p{font-size:13px;line-height:1.5;color:#bbcabe;margin:3px 0 0}
.letter-copy .button{font-size:14px;min-height:54px;padding:16px 22px}
.letter-call{display:block;font-size:13px;text-decoration:underline;text-underline-offset:4px;color:#f5f7ed;margin-top:18px}
.letter-repeat{font-size:12px;line-height:1.55;color:#a8bcb0;max-width:340px;margin:26px 0 0}
.letter-experience{min-width:0;background:#edf0e7;border:1px solid #ffffff1a;border-radius:22px;color:#203c34;overflow:hidden;box-shadow:0 36px 90px #091e2430}
.letter-stage{height:560px;position:relative;perspective:1400px;background:radial-gradient(ellipse at 50% 40%,#fffef6,#e8ecdf 74%);overflow:hidden;isolation:isolate}
.letter-stage-top{position:absolute;top:24px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.1em;color:#617368;z-index:2}
.letter-stage-top>span:last-child{border:1px solid #b9c6b5;border-radius:50px;padding:6px 10px;font-size:10px;letter-spacing:0}
.letter-orbit{position:absolute;width:76%;aspect-ratio:1;left:12%;top:12%;border:1px solid #b9c6b544;border-radius:50%;box-shadow:0 0 0 55px #b9c6b512,0 0 0 110px #b9c6b509}
.letter-paper{position:absolute;left:50%;top:50%;width:84%;aspect-ratio:210/99;container-type:inline-size;transform:translate(-50%,-50%) rotateX(14deg) rotateY(-15deg) rotateZ(-6deg);transform-style:preserve-3d;transition:transform 1.9s cubic-bezier(.22,.7,.17,1);box-shadow:12px 30px 32px #19332830}
.letter-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.letter-bottom{background:#e2ff54;padding:8%;display:flex;align-items:center;justify-content:space-between;border:1px solid #bace63;box-shadow:inset 0 12px 16px -14px #173d38a8}
.letter-small{font-size:2.1cqw;letter-spacing:.045em;font-weight:700;display:block}
.letter-bottom-copy{width:65%}.letter-bottom-copy strong{display:block;font-size:5.6cqw;line-height:1.12;letter-spacing:-.045em;margin-top:5%}
.letter-bottom-note{display:block;font-size:2.3cqw;margin-top:6%}
.letter-qr{width:24%;padding:3%;background:#fff;border-radius:2px;box-shadow:0 4px 14px #203c3410}
.letter-qr img{width:100%;height:auto;display:block}.letter-qr span{display:block;font-size:1.8cqw;line-height:1.4;text-align:center;font-weight:700;margin-top:9%}
.letter-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:center top;transform:translateZ(1px) rotateX(0deg);transition:transform 2s cubic-bezier(.35,.02,.18,1)}
.letter-cover{background:#193d33;color:#f5f7ec;padding:7%;border:1px solid #516c60;transform:translateZ(.5px)}
.letter-cover-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}.letter-cover-top>span:first-child{font-size:3.3cqw;letter-spacing:-.06em;font-weight:700}.letter-cover-top>span:last-child{font-size:1.6cqw;letter-spacing:.04em;line-height:1.7;color:#cdd8ca}.letter-cover-top b{color:#e2ff54;font-size:2.7cqw;letter-spacing:-.03em}
.letter-cover-title{font-size:8.8cqw;font-weight:700;line-height:1.01;letter-spacing:-.065em;margin-top:5%;position:relative;z-index:1}
.letter-cover-title>span{font-size:4.6cqw;display:block;color:#e2ff54;margin-top:3%;letter-spacing:-.045em}
.letter-cover-footer{position:absolute;bottom:6%;left:7%;right:7%;display:flex;justify-content:space-between;font-size:1.65cqw;font-weight:700;z-index:1}.letter-cover-footer>span:last-child{color:#e2ff54}
.letter-cover-mark{position:absolute;right:-2%;bottom:-5%;font-size:39cqw;line-height:1;font-weight:700;letter-spacing:-.1em;color:#ffffff06;transform:rotate(-14deg);pointer-events:none}
.letter-inside{background:#fffcf3;padding:7%;color:#203c34;transform:rotateX(180deg) translateZ(.5px);border:1px solid #d8d9cc;box-shadow:inset 0 -12px 14px -15px #203c3480}
.letter-inside-brand{display:block;font-size:2.8cqw;font-weight:700;letter-spacing:-.05em;margin-bottom:4%}.letter-inside>.letter-small{font-size:2.5cqw;letter-spacing:0}
.letter-inside>strong{font-size:5.3cqw;line-height:1.15;letter-spacing:-.04em;display:block;margin-top:3%}.letter-inside>p{font-size:2.5cqw;line-height:1.5;width:78%;margin:3% 0}
.letter-signature{font-size:2.15cqw;display:block;line-height:1.45}.letter-signature b{font-weight:700}
[data-phase="1"] .letter-paper{transform:translate(-50%,0) rotateX(6deg) rotateY(8deg) rotateZ(3deg) scale(.84)}
[data-phase="2"] .letter-paper{transform:translate(-55%,-1%) rotateX(0deg) rotateY(-9deg) rotateZ(-3deg) scale(.79)}
[data-phase="1"] .letter-lid,[data-phase="2"] .letter-lid{transform:translateZ(1px) rotateX(-180deg)}
.letter-next{position:absolute;bottom:84px;right:24px;display:flex;align-items:center;gap:13px;background:#fff;color:#203c34;padding:19px 21px;border:1px solid #d4dccd;border-radius:12px;box-shadow:0 16px 40px #203c3429;opacity:0;transform:translateY(30px) scale(.95);pointer-events:none;transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1);text-decoration:none}
.letter-next-icon{background:#e2ff54;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:23px}.letter-next small{font-size:8px;letter-spacing:.08em;display:block}.letter-next strong{font-size:18px;letter-spacing:-.04em;display:block;margin:5px 0}.letter-next span span{font-size:11px}
[data-phase="2"] .letter-next{opacity:1;transform:none;pointer-events:auto;transition-delay:.6s}
.letter-stage-caption{position:absolute;bottom:25px;left:26px;right:26px;display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700}.letter-sample{font-size:9px;font-weight:400;color:#748276}
.letter-controls{display:flex;gap:10px;align-items:center;padding:15px 20px;background:#f9fbf5;border-top:1px solid #d8dfd0}.letter-scenes{display:flex;flex:1;gap:6px}.letter-scenes button{flex:1;border:0;background:transparent;padding:12px 4px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;color:#75816f;white-space:nowrap}.letter-scenes button[aria-pressed="true"]{color:#203c34;background:#e3e9d9}.letter-play{border:1px solid #d3dcc8;background:transparent;border-radius:50%;width:34px;height:34px;flex-shrink:0;font-size:13px;cursor:pointer;color:#203c34}.letter-under{padding:0 24px 17px;background:#f9fbf5;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#64715f}.letter-under button{color:#203c34;background:none;border:0;font-size:10px;padding:3px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.letter-showcase button:focus-visible,.letter-showcase a:focus-visible{outline:3px solid #738b4d;outline-offset:4px}
.letter-format-sample{background:#193d33;color:#f8f9ec;aspect-ratio:210/99;padding:7%;display:flex;flex-direction:column;justify-content:center}.letter-format-sample span{font-size:18px;letter-spacing:-1px;margin-bottom:16px;font-weight:700}.letter-format-sample strong{font-size:clamp(24px,4vw,42px);line-height:1.05;letter-spacing:-.04em}.letter-format-sample em{font-style:normal;color:#e2ff54;font-size:20px;margin-top:10px}
@media(min-width:1500px){.letter-stage{height:630px}}
@media(max-width:1100px){.letter-layout{gap:30px;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr)}.letter-stage{height:480px}.letter-stage-top{font-size:8px;left:18px;right:18px}.letter-controls{padding:12px}.letter-scenes button{font-size:10px}.letter-under{padding:0 15px 16px}.letter-copy h2{font-size:38px}}
@media(max-width:800px){.letter-showcase{padding:64px 0}.letter-layout{grid-template-columns:1fr;gap:34px}.letter-copy h2{font-size:clamp(37px,7vw,53px);max-width:570px}.letter-intro{max-width:560px;margin-bottom:24px}.letter-steps{gap:16px;margin-bottom:25px}.letter-repeat{max-width:100%;margin-top:20px}.letter-stage{height:570px}.letter-paper{max-width:600px}.letter-scenes button{font-size:12px}.letter-under{font-size:11px}.letter-under button{font-size:11px}}
@media(max-width:480px){.letter-showcase{scroll-margin-top:72px;padding:44px 0}.letter-eyebrow{font-size:10px;margin-bottom:18px}.letter-copy h2{font-size:37px}.letter-intro{font-size:15px;margin-top:18px}.letter-copy .button{width:100%;justify-content:space-between}.letter-call{text-align:center;font-size:12px}.letter-repeat{font-size:11px}.letter-stage{height:410px}.letter-paper{width:88%}.letter-stage-top{top:18px;font-size:7px}.letter-stage-top>span:last-child{font-size:9px}.letter-stage-caption{left:19px;right:19px;bottom:19px;font-size:12px}.letter-scenes{gap:1px}.letter-scenes button{font-size:10px;padding:10px 2px}.letter-controls{gap:4px;padding:12px 10px}.letter-under{padding:0 13px 14px;gap:8px;font-size:9px}.letter-under button{font-size:9px}.letter-next{bottom:75px;right:16px;padding:12px 15px;gap:10px}.letter-next strong{font-size:16px}.letter-next-icon{width:30px;height:30px}.letter-next small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.letter-paper,.letter-lid,.letter-next{transition:none!important}}
/* Keep all four surfaces within the physical DIN-lang proportions. */
.letter-copy .button-lime{color:#203c34}
.letter-cover{padding:6%}.letter-cover-title{font-size:7.4cqw;margin-top:3%}.letter-cover-title>span{font-size:4.2cqw;margin-top:2%}.letter-cover-footer{left:6%;right:6%;bottom:6%;font-size:1.5cqw}
.letter-inside{padding:5% 7%}.letter-inside-brand{font-size:2.5cqw;margin-bottom:2%}.letter-inside>.letter-small{font-size:2.2cqw}.letter-inside>strong{font-size:4.9cqw;line-height:1.12;margin-top:2%}.letter-inside>p{font-size:2.3cqw;line-height:1.4;margin:2% 0;width:86%}.letter-signature{font-size:2cqw;line-height:1.3}
.letter-paper{transform-origin:50% 0}
#briefkampagne{scroll-margin-top:110px}
@media(max-width:800px){.letter-experience{order:-1}}