:root{--paper:#f3f0e9;--white:#fff;--stone:#e9e4da;--ink:#0d2d31;--ink2:#163f43;--muted:#607071;--copper:#b86542;--copper2:#9a4e31;--line:rgba(13,45,49,.16);--max:1320px;--shadow:0 28px 80px rgba(13,45,49,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}body,button,input,textarea,select{font-family:inherit}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}h1,h2,h3{margin:0 0 .45em;line-height:1.08;letter-spacing:-.035em}p{margin-top:0}.shell{width:min(calc(100% - 64px),var(--max));margin-inline:auto}.eyebrow{margin-bottom:18px;color:var(--copper2);font-size:12px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.eyebrow-light{color:#efb79f}.site-header{position:fixed;z-index:50;top:0;left:0;width:100%;transition:.25s}.site-header.is-scrolled{background:rgba(243,240,233,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px}.brand-sign{position:relative;width:42px;height:42px;border-radius:11px;background:var(--ink);box-shadow:0 10px 28px rgba(13,45,49,.17)}.brand-sign i{position:absolute;left:11px;width:19px;height:7px;border-radius:99px;background:#fff}.brand-sign i:first-child{top:11px}.brand-sign i:last-child{bottom:11px;width:13px;background:#eab39b}.brand-word{display:flex;gap:7px;align-items:baseline;font-size:20px;letter-spacing:-.04em}.brand-word strong{font-weight:850}.brand-word em{font-style:normal;color:var(--copper);font-weight:700}.main-nav{display:flex;align-items:center;gap:28px}.main-nav>a{font-size:14px;font-weight:750;color:#314b4d}.main-nav>a.active{color:var(--copper2)}.main-nav .nav-cta{padding:13px 19px;border-radius:99px;background:var(--ink);color:#fff}.nav-toggle{display:none;border:0;background:none;padding:10px}.nav-toggle span{display:block;width:27px;height:2px;background:var(--ink);margin:6px 0}.hero{position:relative;min-height:760px;display:flex;align-items:end;overflow:hidden;background:var(--ink)}.hero-image{position:absolute;inset:0;background:linear-gradient(120deg,rgba(13,45,49,.08),rgba(13,45,49,.1)),url('/assets/img/hero-home.webp') center/cover no-repeat}.hero-image:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 25%,rgba(184,101,66,.2),transparent 28%)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,24,27,.94) 0%,rgba(6,24,27,.83) 48%,rgba(6,24,27,.2) 100%)}.hero-content{position:relative;z-index:2;padding:180px 0 72px;color:#fff}.hero-content h1{max-width:900px;font-size:clamp(48px,5.7vw,82px);font-weight:730}.hero-lead{max-width:780px;color:rgba(255,255,255,.76);font-size:21px}.hero-actions{display:flex;gap:12px;margin-top:32px}.button{display:inline-flex;min-height:52px;padding:0 22px;border:1px solid transparent;border-radius:4px;align-items:center;justify-content:center;font-weight:800;cursor:pointer}.button-primary{background:var(--ink);color:#fff}.button-light{background:#fff;color:var(--ink)}.button-outline-light{border-color:rgba(255,255,255,.5);color:#fff}.button-ghost-dark{border-color:rgba(255,255,255,.22);color:#fff;background:transparent}.hero-meta{display:flex;gap:28px;margin-top:58px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);font-size:12px;color:rgba(255,255,255,.66)}.section{padding:115px 0}.section-white{background:#fff}.section-stone{background:var(--stone)}.section-ink{background:var(--ink);color:#fff}.section-copper{background:var(--copper2);color:#fff}.split-intro,.two-column,.decision-grid,.reference-header,.solution-proof,.profile-grid,.final-cta-grid,.page-hero-grid,.make-buy,.contact-grid,.profile-detail{display:grid;grid-template-columns:1fr 1fr;gap:88px}.split-intro h2,.two-column h2,.reference-header h2,.solution-proof h2,.profile-copy h2,.decision-grid h2,.make-buy h2,.manifesto h2,.page-hero h1{font-size:clamp(40px,4.6vw,66px)}.intro-list{border-top:1px solid var(--line)}.intro-list article{display:grid;grid-template-columns:50px 1fr;gap:14px;padding:23px 0;border-bottom:1px solid var(--line)}.intro-list span{color:var(--copper);font-size:12px;font-weight:850}.intro-list p{margin:0;font-size:18px}.editorial-heading{max-width:1000px;margin-bottom:54px}.editorial-heading h2{font-size:clamp(42px,4.8vw,68px);color:#fff}.service-lines{border-top:1px solid rgba(255,255,255,.18)}.service-line{display:grid;grid-template-columns:60px 1fr 40px;gap:28px;padding:33px 0;border-bottom:1px solid rgba(255,255,255,.18);align-items:start}.service-line>span{color:#e9aa8e;font-size:12px;font-weight:850}.service-line h3{color:#fff;font-size:31px}.service-line p{max-width:780px;color:rgba(255,255,255,.65);margin:0}.service-line i{font-style:normal;font-size:24px;color:#e9aa8e}.reference-header{align-items:end;margin-bottom:52px}.reference-header>p{color:var(--muted);font-size:18px}.cases{display:grid;grid-template-columns:1fr 1fr;gap:20px}.case{padding:35px;border-top:4px solid var(--ink);background:#fff;min-height:370px}.case-wide{grid-column:1/-1;display:grid;grid-template-columns:.7fr 1.3fr;column-gap:60px}.case-wide .case-kicker{grid-column:1}.case-wide h3,.case-wide>p,.case-wide ul{grid-column:2}.case-kicker{display:flex;justify-content:space-between;gap:15px;margin-bottom:50px}.case-kicker span{font-weight:850}.case-kicker small{color:var(--muted)}.case h3{font-size:34px}.case p{color:var(--muted)}.case ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}.case li{padding:7px 10px;background:var(--paper);font-size:11px;font-weight:750}.section-action{margin-top:28px}.solution-proof{align-items:start}.solution-proof>div:first-child p{color:var(--muted);font-size:18px}.solution-names{border-top:1px solid var(--line)}.solution-names span{display:block;padding:22px 0;border-bottom:1px solid var(--line);font-size:28px;font-weight:800}.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:850}.text-link span{color:var(--copper)}.make-buy{grid-template-columns:1.05fr .95fr}.make-buy h2{color:#fff}.make-buy-options{border-top:1px solid rgba(255,255,255,.25)}.make-buy-options article{padding:23px 0;border-bottom:1px solid rgba(255,255,255,.25)}.make-buy-options span{font-size:11px;color:#ffd4c3;font-weight:850}.make-buy-options h3{color:#fff;font-size:24px}.make-buy-options p{color:rgba(255,255,255,.72);margin:0}.make-buy blockquote{grid-column:1/-1;margin:38px 0 0;border-left:3px solid #fff;padding-left:18px;display:grid}.make-buy blockquote strong{font-size:20px}.make-buy blockquote span{color:rgba(255,255,255,.7)}.profile-grid{align-items:center}.profile-visual{min-height:500px;background:var(--stone);display:grid;place-items:center;padding:45px}.profile-monogram{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:58px;font-weight:850}.profile-visual p{text-align:center;color:var(--muted);max-width:420px}.profile-copy .lead,.profile-detail .lead{font-size:24px;color:var(--ink)}.profile-copy p{color:var(--muted)}.final-cta{background:var(--ink);color:#fff}.final-cta h2{color:#fff;font-size:clamp(42px,4.8vw,68px)}.final-cta-grid>div:last-child p{color:rgba(255,255,255,.7);font-size:18px}.page-hero{padding:190px 0 110px;background:var(--paper)}.page-hero-copy{padding-top:42px}.page-hero-copy p{font-size:20px;color:var(--muted)}.service-overview{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.service-overview>a,.service-overview>div{padding:34px 34px 34px 0;border-bottom:1px solid var(--line)}.service-overview>a:nth-child(even),.service-overview>div:nth-child(even){padding-left:34px;border-left:1px solid var(--line)}.service-overview span{font-size:11px;color:var(--copper);font-weight:850}.service-overview h2{font-size:33px}.service-overview p{color:var(--muted)}.service-overview.compact h2{font-size:27px}.bullet-block p,.bullet-block li{color:var(--muted)}.bullet-block ul{padding-left:18px;display:grid;gap:12px}.manifesto{max-width:1050px}.manifesto h2{color:inherit}.manifesto p{max-width:800px;color:inherit;opacity:.73;font-size:19px}.reference-teaser{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px}.reference-teaser a{padding:28px;border-top:3px solid var(--ink);background:#fff;font-weight:850}.automation-flow,.process-steps,.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.automation-flow article,.process-steps article{padding:30px;border-top:3px solid var(--ink);background:var(--paper)}.automation-flow span,.process-steps span,.values span{font-size:11px;color:var(--copper);font-weight:850}.automation-flow h2{font-size:28px}.automation-flow p,.process-steps p{color:var(--muted)}.case-studies{display:grid;gap:24px}.case-study{display:grid;grid-template-columns:240px 1fr;gap:55px;padding:55px;background:#fff;border-top:4px solid var(--ink);scroll-margin-top:110px}.case-study-meta{display:grid;align-content:start;gap:10px}.case-study-meta span{font-size:40px;font-weight:850}.case-study-meta small{color:var(--muted)}.case-study h2{font-size:44px}.case-study .lead{font-size:21px}.case-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px}.case-columns h3{font-size:20px}.case-columns p{color:var(--muted)}.developed-list{border-top:1px solid var(--line)}.developed-list article{display:grid;grid-template-columns:70px 1fr;gap:30px;padding:37px 0;border-bottom:1px solid var(--line)}.developed-list>article>span{color:var(--copper);font-weight:850}.developed-list h2{font-size:45px}.developed-list p{color:var(--muted);max-width:780px}.legal-note,.legal{max-width:900px}.legal-page{padding-top:170px;background:#fff}.legal h1{font-size:58px}.legal h2{margin-top:48px;font-size:30px}.legal p,.legal li{color:var(--muted)}.profile-detail{align-items:center}.profile-monogram.large{width:360px;height:360px;font-size:88px}.values article{padding-top:25px;border-top:1px solid rgba(255,255,255,.22)}.values h2{color:#fff}.values p{color:rgba(255,255,255,.65)}.contact-grid aside h2{font-size:50px}.contact-grid aside p{color:var(--muted)}.contact-mail{font-size:22px;font-weight:850}.contact-grid form{display:grid;gap:17px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-grid label{display:grid;gap:7px;font-size:13px;font-weight:750}.contact-grid input,.contact-grid select,.contact-grid textarea{width:100%;padding:15px;border:1px solid var(--line);background:var(--paper);font:inherit}.contact-grid textarea{min-height:160px;resize:vertical}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:start}.check input{width:auto;margin-top:5px}.site-footer{padding:85px 0 25px;background:#071f22;color:#fff}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:55px}.brand-light{color:#fff}.footer-lead p{max-width:400px;color:rgba(255,255,255,.6)}.footer-mail{font-weight:850}.footer-grid h3{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#fff}.footer-grid>div:not(.footer-lead) a,.footer-grid button{display:block;margin:9px 0;padding:0;border:0;background:none;color:rgba(255,255,255,.6);font-size:14px;text-align:left}.footer-bottom{display:flex;justify-content:space-between;margin-top:55px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.45);font-size:12px}.cookie-consent{position:fixed;z-index:100;inset:0;display:grid;place-items:end center;padding:20px;background:rgba(7,31,34,.72);backdrop-filter:blur(8px)}.cookie-consent[hidden]{display:none}.cookie-panel{width:min(1050px,100%);display:grid;grid-template-columns:1.5fr .65fr .65fr 1fr;gap:20px;padding:28px;background:#071f22;color:#fff}.cookie-panel h2{font-size:28px}.cookie-panel p{color:rgba(255,255,255,.65)}.cookie-panel label{display:flex;gap:10px;padding:15px;border:1px solid rgba(255,255,255,.16)}.cookie-panel label span{display:grid}.cookie-panel small{color:rgba(255,255,255,.55)}.cookie-actions{display:grid;gap:8px}.text-button{border:0;background:none;color:rgba(255,255,255,.62);text-decoration:underline}.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.main-nav{position:absolute;top:78px;left:20px;right:20px;display:none;flex-direction:column;align-items:stretch;padding:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.main-nav.is-open{display:flex}.nav-toggle{display:block}.hero{min-height:720px}.hero-overlay{background:rgba(6,24,27,.8)}.split-intro,.two-column,.decision-grid,.reference-header,.solution-proof,.profile-grid,.final-cta-grid,.page-hero-grid,.make-buy,.contact-grid,.profile-detail{grid-template-columns:1fr;gap:42px}.cases{grid-template-columns:1fr}.case-wide{grid-column:auto;display:block}.case-wide h3,.case-wide>p,.case-wide ul{grid-column:auto}.service-overview{grid-template-columns:1fr}.service-overview>a:nth-child(even),.service-overview>div:nth-child(even){padding-left:0;border-left:0}.reference-teaser{grid-template-columns:1fr}.automation-flow,.process-steps,.values{grid-template-columns:1fr 1fr}.case-study{grid-template-columns:1fr;gap:25px}.footer-grid{grid-template-columns:1fr 1fr}.cookie-panel{grid-template-columns:1fr}.profile-monogram.large{width:260px;height:260px}.page-hero-copy{padding-top:0}}
@media(max-width:680px){.shell{width:min(calc(100% - 28px),var(--max))}.header-inner{min-height:76px}.brand-word{font-size:18px}.hero{min-height:690px}.hero-content{padding:140px 0 55px}.hero-content h1{font-size:clamp(42px,12vw,58px)}.hero-lead{font-size:18px}.hero-actions{display:grid}.button{width:100%}.hero-meta{flex-direction:column;gap:7px;margin-top:35px}.section{padding:78px 0}.split-intro h2,.two-column h2,.reference-header h2,.solution-proof h2,.profile-copy h2,.decision-grid h2,.make-buy h2,.manifesto h2,.page-hero h1{font-size:clamp(36px,10vw,50px)}.service-line{grid-template-columns:40px 1fr}.service-line i{display:none}.service-line h3{font-size:27px}.cases{gap:14px}.case{padding:24px}.case-kicker{display:grid;margin-bottom:35px}.solution-names span{font-size:23px}.automation-flow,.process-steps,.values{grid-template-columns:1fr}.case-study{padding:28px}.case-study h2{font-size:36px}.case-columns{grid-template-columns:1fr;gap:20px}.developed-list article{grid-template-columns:42px 1fr}.developed-list h2{font-size:36px}.field-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:7px}.page-hero{padding:145px 0 75px}.profile-monogram.large{width:210px;height:210px;font-size:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* 2026 editorial refinement: restrained type scale and real visual assets */
.hero{min-height:680px;align-items:center}
.hero-image{background-position:center;background-size:cover}
.hero-overlay{background:linear-gradient(90deg,rgba(6,24,27,.96) 0%,rgba(6,24,27,.88) 43%,rgba(6,24,27,.26) 72%,rgba(6,24,27,.08) 100%)}
.hero-content{padding:150px 0 64px}
.hero-content h1{max-width:760px;font-size:clamp(44px,4.55vw,66px);line-height:1.04;letter-spacing:-.038em}
.hero-lead{max-width:690px;font-size:19px;line-height:1.65}
.hero-meta{max-width:760px;margin-top:42px}
.section{padding:92px 0}
.split-intro h2,.two-column h2,.reference-header h2,.solution-proof h2,.profile-copy h2,.decision-grid h2,.make-buy h2,.manifesto h2{font-size:clamp(32px,3.25vw,47px);line-height:1.12}
.editorial-heading{max-width:860px}
.editorial-heading h2{font-size:clamp(34px,3.5vw,50px);line-height:1.1}
.final-cta h2{font-size:clamp(34px,3.7vw,52px)}
.service-line h3{font-size:27px}
.case h3{font-size:29px}
.case-study h2{font-size:36px}
.developed-list h2{font-size:36px}
.contact-grid aside h2{font-size:40px}
.page-hero{padding:150px 0 78px;background:var(--paper);overflow:hidden}
.page-hero-grid{grid-template-columns:minmax(0,.86fr) minmax(520px,1.14fr);gap:72px;align-items:center}
.page-hero-text h1{font-size:clamp(38px,3.8vw,56px);line-height:1.06;max-width:760px}
.page-hero-text>p:not(.eyebrow){font-size:18px;color:var(--muted);max-width:700px}
.page-hero-media{margin:0;position:relative}
.page-hero-media:before{content:"";position:absolute;inset:10% -8% -10% 12%;background:rgba(184,101,65,.12);filter:blur(50px)}
.page-hero-media img{position:relative;width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:2px;box-shadow:0 30px 80px rgba(13,45,49,.18)}
.profile-visual{background-image:url('/assets/img/hero-about.webp');background-size:cover;background-position:center;position:relative;overflow:hidden}
.profile-visual:before{content:"";position:absolute;inset:0;background:rgba(8,35,39,.72)}
.profile-visual>*{position:relative;z-index:1}.profile-visual p{color:rgba(255,255,255,.78)}
@media(max-width:1000px){.page-hero-grid{grid-template-columns:1fr;gap:38px}.page-hero-media{max-width:820px}.hero-overlay{background:rgba(6,24,27,.78)}}
@media(max-width:680px){.hero{min-height:650px}.hero-content{padding:128px 0 48px}.hero-content h1{font-size:clamp(38px,10.8vw,48px)}.section{padding:68px 0}.split-intro h2,.two-column h2,.reference-header h2,.solution-proof h2,.profile-copy h2,.decision-grid h2,.make-buy h2,.manifesto h2{font-size:clamp(30px,8.8vw,39px)}.editorial-heading h2{font-size:clamp(31px,9vw,40px)}.final-cta h2{font-size:clamp(31px,9vw,41px)}.page-hero{padding:125px 0 60px}.page-hero-text h1{font-size:clamp(34px,9.7vw,44px)}.page-hero-text>p:not(.eyebrow){font-size:17px}.service-line h3{font-size:24px}.case-study h2,.developed-list h2{font-size:31px}.contact-grid aside h2{font-size:34px}}


/* =========================================================
   BITNET ONE – HOME HERO
   ========================================================= */

.hero.hero-editorial {
    position: relative;
    min-height: min(900px, 100vh);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: #061b1e;
}

/* Hintergrundbild */
.hero-editorial .hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: url("/assets/img/hero-home-composed.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: none;
}

/* Abdunklung hinter dem Text */
.hero-editorial .hero-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 20, 23, 0.97) 0%,
            rgba(3, 20, 23, 0.92) 22%,
            rgba(3, 20, 23, 0.72) 43%,
            rgba(3, 20, 23, 0.25) 66%,
            rgba(3, 20, 23, 0.06) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 20, 23, 0.28) 0%,
            rgba(3, 20, 23, 0.02) 42%,
            rgba(3, 20, 23, 0.72) 100%
        );
}

/* Dezente zusätzliche Tiefenwirkung */
.hero-editorial .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 81% 38%,
            rgba(222, 126, 70, 0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(3, 20, 23, 0.14),
            transparent 28%
        );
}

/*
 * hero-content besitzt im HTML zusätzlich die Klasse shell.
 * Deshalb hier KEIN width: 100%.
 */
.hero-editorial .hero-content {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 64px), var(--max));
    margin-inline: auto;

    padding-top: 170px;
    padding-bottom: 58px;

    color: #fff;
}

.hero-editorial .hero-content .eyebrow {
    max-width: 700px;
    margin: 0 0 20px;

    color: #efaa8c;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-editorial .hero-content h1 {
    max-width: 680px;
    margin: 0 0 25px;

    color: #fff;
    font-size: clamp(46px, 4.25vw, 66px);
    font-weight: 760;
    line-height: 1.04;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.hero-editorial .hero-lead {
    max-width: 640px;
    margin: 0;

    color: rgba(255, 255, 255, 0.79);
    font-size: clamp(18px, 1.25vw, 20px);
    line-height: 1.65;
}

.hero-editorial .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 29px;
}

.hero-editorial .hero-actions .button {
    min-height: 50px;
}

.hero-editorial .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 29px;

    max-width: 680px;
    margin-top: 38px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.22);

    color: rgba(255, 255, 255, 0.67);
    font-size: 12px;
    line-height: 1.5;
}

.hero-editorial .hero-meta span {
    position: relative;
}

.hero-editorial .hero-meta span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -17px;

    width: 3px;
    height: 3px;
    border-radius: 50%;

    background: #df8d66;
    transform: translateY(-50%);
}

/* =========================================================
   HEADER AUF DEM HOME-HERO
   ========================================================= */

.site-header {
    color: #fff;
}

.site-header:not(.is-scrolled) {
    background:
        linear-gradient(
            180deg,
            rgba(3, 20, 23, 0.83) 0%,
            rgba(3, 20, 23, 0.46) 58%,
            rgba(3, 20, 23, 0) 100%
        );
}

.site-header:not(.is-scrolled) .brand-word,
.site-header:not(.is-scrolled) .brand-word strong {
    color: #fff;
}

.site-header:not(.is-scrolled) .brand-word em {
    color: #e69a79;
}

.site-header:not(.is-scrolled) .main-nav > a {
    color: rgba(255, 255, 255, 0.8);
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.site-header:not(.is-scrolled) .main-nav > a:hover,
.site-header:not(.is-scrolled) .main-nav > a.active {
    color: #fff;
}

.site-header:not(.is-scrolled) .main-nav .nav-cta {
    background: rgba(12, 55, 59, 0.96);
    color: #fff;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
}

.site-header:not(.is-scrolled) .main-nav .nav-cta:hover {
    background: #fff;
    color: var(--ink);
}

.site-header:not(.is-scrolled) .brand-sign {
    background: rgba(14, 57, 61, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header:not(.is-scrolled) .nav-toggle span {
    background: #fff;
}

/* Header nach dem Scrollen */
.site-header.is-scrolled {
    background: rgba(243, 240, 233, 0.96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 35px rgba(7, 31, 34, 0.08);
    color: var(--ink);
    backdrop-filter: blur(18px);
}

.site-header.is-scrolled .brand-word,
.site-header.is-scrolled .brand-word strong {
    color: var(--ink);
}

.site-header.is-scrolled .brand-word em {
    color: var(--copper);
}

.site-header.is-scrolled .main-nav > a {
    color: #314b4d;
}

.site-header.is-scrolled .main-nav > a:hover,
.site-header.is-scrolled .main-nav > a.active {
    color: var(--copper2);
}

.site-header.is-scrolled .main-nav .nav-cta {
    background: var(--ink);
    color: #fff;
}

.site-header.is-scrolled .nav-toggle span {
    background: var(--ink);
}

/* =========================================================
   HERO – TABLET
   ========================================================= */

@media (max-width: 1000px) {
    .hero.hero-editorial {
        min-height: 790px;
    }

    .hero-editorial .hero-image {
        background-position: 59% center;
    }

    .hero-editorial .hero-image::after {
        background:
            linear-gradient(
                90deg,
                rgba(3, 20, 23, 0.97) 0%,
                rgba(3, 20, 23, 0.9) 38%,
                rgba(3, 20, 23, 0.54) 68%,
                rgba(3, 20, 23, 0.25) 100%
            ),
            linear-gradient(
                180deg,
                rgba(3, 20, 23, 0.24),
                rgba(3, 20, 23, 0.72)
            );
    }

    .hero-editorial .hero-content {
        width: min(calc(100% - 48px), var(--max));
        padding-top: 145px;
        padding-bottom: 50px;
    }

    .hero-editorial .hero-content h1 {
        max-width: 620px;
        font-size: clamp(44px, 6vw, 59px);
    }

    .hero-editorial .hero-lead {
        max-width: 580px;
    }

    /*
     * Das mobile Menü benötigt einen hellen Hintergrund.
     * Die Links müssen dort deshalb dunkel sein.
     */
    .site-header .main-nav.is-open {
        background: rgba(243, 240, 233, 0.98);
        backdrop-filter: blur(18px);
    }

    .site-header .main-nav.is-open > a {
        color: #314b4d;
    }

    .site-header .main-nav.is-open > a.active {
        color: var(--copper2);
    }

    .site-header .main-nav.is-open .nav-cta {
        background: var(--ink);
        color: #fff;
    }
}

/* =========================================================
   HERO – SMARTPHONE
   ========================================================= */

@media (max-width: 680px) {
    .hero.hero-editorial {
        min-height: 750px;
    }

    .hero-editorial .hero-image {
        background-position: 61% center;
    }

    .hero-editorial .hero-image::after {
        background:
            linear-gradient(
                180deg,
                rgba(3, 20, 23, 0.65) 0%,
                rgba(3, 20, 23, 0.58) 27%,
                rgba(3, 20, 23, 0.9) 63%,
                rgba(3, 20, 23, 0.99) 100%
            );
    }

    .hero-editorial .hero-content {
        width: min(calc(100% - 28px), var(--max));
        padding-top: 125px;
        padding-bottom: 38px;
    }

    .hero-editorial .hero-content .eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
        line-height: 1.5;
    }

    .hero-editorial .hero-content h1 {
        max-width: 100%;
        margin-bottom: 19px;

        font-size: clamp(37px, 10.6vw, 47px);
        line-height: 1.04;
    }

    .hero-editorial .hero-lead {
        max-width: 100%;
        font-size: 17px;
        line-height: 1.58;
    }

    .hero-editorial .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .hero-editorial .hero-actions .button {
        width: 100%;
    }

    .hero-editorial .hero-meta {
        flex-direction: column;
        gap: 5px;

        margin-top: 27px;
        padding-top: 15px;
    }

    .hero-editorial .hero-meta span::after {
        display: none;
    }
}

/* =========================================================
   MOBILE REFINEMENT
   Smartphones bis 680px
   ========================================================= */

@media (max-width: 680px) {

    /* -----------------------------------------------------
       1. Grundlegender Overflow-Schutz
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 16px;
        line-height: 1.58;
    }

    main,
    section,
    header,
    footer,
    .shell,
    .cases,
    .case,
    .case-wide,
    .case-kicker,
    .service-lines,
    .service-line,
    .reference-header,
    .solution-proof,
    .profile-grid,
    .final-cta-grid,
    .make-buy,
    .page-hero-grid,
    .contact-grid {
        min-width: 0;
        max-width: 100%;
    }

    img,
    svg,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    h1,
    h2,
    h3,
    p,
    li,
    a,
    span,
    small {
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }

    /* -----------------------------------------------------
       2. Einheitliches Seitenraster
       ----------------------------------------------------- */

    .shell {
        width: 100%;
        max-width: none;
        margin-inline: auto;
        padding-inline: 20px;
    }

    .section {
        padding-block: 64px;
    }

    /* -----------------------------------------------------
       3. Header
       ----------------------------------------------------- */

    .header-inner {
        min-height: 68px;
    }

    .brand {
        gap: 9px;
    }

    .brand-sign {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        flex: 0 0 38px;
    }

    .brand-sign i {
        left: 10px;
        width: 17px;
        height: 6px;
    }

    .brand-sign i:first-child {
        top: 10px;
    }

    .brand-sign i:last-child {
        bottom: 10px;
        width: 12px;
    }

    .brand-word {
        gap: 5px;
        font-size: 17px;
    }

    .nav-toggle {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .main-nav {
        top: 68px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100vh - 84px);
        overflow-y: auto;

        gap: 3px;
        padding: 14px;

        border-radius: 3px;
    }

    .main-nav > a {
        width: 100%;
        padding: 11px 12px;
        font-size: 15px;
    }

    .main-nav .nav-cta {
        margin-top: 6px;
        padding: 12px 14px;
        text-align: center;
    }

    /* -----------------------------------------------------
       4. Hero
       ----------------------------------------------------- */

    .hero.hero-editorial {
        min-height: 720px;
    }

    .hero-editorial .hero-content {
        width: 100%;
        max-width: none;

        margin: 0;
        padding:
            118px
            20px
            34px;
    }

    .hero-editorial .hero-content .eyebrow {
        max-width: 100%;
        margin-bottom: 14px;

        font-size: 10px;
        line-height: 1.45;
        letter-spacing: 0.12em;
    }

    .hero-editorial .hero-content h1 {
        max-width: 100%;
        margin-bottom: 18px;

        font-size: clamp(35px, 9.8vw, 43px);
        line-height: 1.05;
        letter-spacing: -0.04em;
        text-wrap: pretty;
    }

    .hero-editorial .hero-lead {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.58;
    }

    .hero-editorial .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;

        margin-top: 23px;
    }

    .hero-editorial .hero-actions .button {
        width: 100%;
        min-height: 48px;
    }

    .hero-editorial .hero-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;

        width: 100%;
        max-width: 100%;

        margin-top: 26px;
        padding-top: 14px;

        font-size: 11px;
    }

    .hero-editorial .hero-meta span::after {
        display: none;
    }

    /* -----------------------------------------------------
       5. Allgemeine Typografie
       ----------------------------------------------------- */

    .eyebrow {
        margin-bottom: 13px;
        font-size: 10px;
        line-height: 1.45;
        letter-spacing: 0.13em;
    }

    .split-intro h2,
    .two-column h2,
    .reference-header h2,
    .solution-proof h2,
    .profile-copy h2,
    .decision-grid h2,
    .make-buy h2,
    .manifesto h2 {
        font-size: clamp(29px, 8vw, 36px);
        line-height: 1.1;
        letter-spacing: -0.035em;
    }

    .editorial-heading h2,
    .final-cta h2 {
        font-size: clamp(30px, 8.2vw, 37px);
        line-height: 1.09;
    }

    /* -----------------------------------------------------
       6. Zweispaltige Bereiche
       ----------------------------------------------------- */

    .split-intro,
    .two-column,
    .decision-grid,
    .reference-header,
    .solution-proof,
    .profile-grid,
    .final-cta-grid,
    .page-hero-grid,
    .make-buy,
    .contact-grid,
    .profile-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* -----------------------------------------------------
       7. Ausgangslagen
       ----------------------------------------------------- */

    .intro-list article {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;

        padding-block: 18px;
    }

    .intro-list p {
        font-size: 16px;
        line-height: 1.58;
    }

    /* -----------------------------------------------------
       8. Leistungslinien
       ----------------------------------------------------- */

    .editorial-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 35px;
    }

    .service-line {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;

        padding-block: 25px;
    }

    .service-line > span {
        padding-top: 4px;
    }

    .service-line h3 {
        margin-bottom: 10px;

        font-size: 23px;
        line-height: 1.13;
    }

    .service-line p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.6;
    }

    .service-line i {
        display: none;
    }

    /* -----------------------------------------------------
       9. Referenzüberschrift
       ----------------------------------------------------- */

    .reference-header {
        align-items: start;
        margin-bottom: 30px;
    }

    .reference-header > p {
        margin: 0;

        font-size: 16px;
        line-height: 1.6;
    }

    /* -----------------------------------------------------
       10. Referenzkarten
       ----------------------------------------------------- */

    .cases {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;

        width: 100%;
    }

    .case,
    .case-wide {
        display: block;
        grid-column: auto;

        width: 100%;
        min-width: 0;
        min-height: 0;

        padding: 24px 21px 25px;

        border-top-width: 3px;
    }

    .case-wide .case-kicker,
    .case-wide h3,
    .case-wide > p,
    .case-wide ul {
        grid-column: auto;
    }

    .case-kicker {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;

        width: 100%;
        margin-bottom: 28px;
    }

    .case-kicker span {
        font-size: 14px;
        line-height: 1.4;
    }

    .case-kicker small {
        display: block;

        font-size: 12px;
        line-height: 1.45;
    }

    .case h3,
    .case-wide h3 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 14px;

        font-size: clamp(25px, 7.3vw, 30px);
        line-height: 1.08;
        letter-spacing: -0.035em;
        text-wrap: pretty;
    }

    .case p,
    .case-wide > p {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;

        font-size: 15px;
        line-height: 1.62;
    }

    .case ul,
    .case-wide ul {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 7px;

        width: 100%;
        max-width: 100%;

        margin: 21px 0 0;
        padding: 0;
    }

    .case li,
    .case-wide li {
        flex: 0 1 auto;
        max-width: 100%;

        padding: 6px 8px;

        font-size: 10px;
        line-height: 1.35;
        white-space: normal;
    }

    .section-action {
        margin-top: 20px;
    }

    /* -----------------------------------------------------
       11. Flexi-Lösungen
       ----------------------------------------------------- */

    .solution-proof > div:first-child p {
        font-size: 16px;
        line-height: 1.6;
    }

    .solution-names span {
        padding-block: 17px;

        font-size: 21px;
        line-height: 1.25;
    }

    /* -----------------------------------------------------
       12. Make-or-Buy-Bereich
       ----------------------------------------------------- */

    .make-buy-options article {
        padding-block: 19px;
    }

    .make-buy-options h3 {
        font-size: 21px;
    }

    .make-buy-options p {
        font-size: 15px;
        line-height: 1.58;
    }

    .make-buy blockquote {
        margin-top: 24px;
    }

    .make-buy blockquote strong {
        font-size: 18px;
        line-height: 1.4;
    }

    /* -----------------------------------------------------
       13. Profilbereich
       ----------------------------------------------------- */

    .profile-visual {
        min-height: 330px;
        padding: 28px 20px;
    }

    .profile-monogram {
        width: 150px;
        height: 150px;

        font-size: 42px;
    }

    .profile-copy .lead,
    .profile-detail .lead {
        font-size: 20px;
        line-height: 1.5;
    }

    /* -----------------------------------------------------
       14. Referenz-Detailseiten
       ----------------------------------------------------- */

    .case-studies {
        gap: 17px;
    }

    .case-study {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 21px;

        width: 100%;
        min-width: 0;
        padding: 25px 21px;
    }

    .case-study-meta span {
        font-size: 30px;
    }

    .case-study h2 {
        font-size: clamp(27px, 7.6vw, 33px);
        line-height: 1.1;
    }

    .case-study .lead {
        font-size: 18px;
        line-height: 1.55;
    }

    .case-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;

        margin-top: 26px;
    }

    /* -----------------------------------------------------
       15. Entwickelte Lösungen
       ----------------------------------------------------- */

    .developed-list article {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 13px;

        padding-block: 26px;
    }

    .developed-list h2 {
        font-size: 28px;
        line-height: 1.12;
    }

    /* -----------------------------------------------------
       16. Footer
       ----------------------------------------------------- */

    .site-footer {
        padding: 60px 0 22px;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;
    }

    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;

        margin-top: 38px;
    }

    /* -----------------------------------------------------
       17. Cookie-Panel
       ----------------------------------------------------- */

    .cookie-consent {
        padding: 10px;
    }

    .cookie-panel {
        width: 100%;
        max-height: calc(100vh - 20px);
        overflow-y: auto;

        grid-template-columns: minmax(0, 1fr);
        gap: 13px;

        padding: 20px;
    }

    .cookie-panel h2 {
        font-size: 23px;
    }
}

/* =========================================================
   HERO TAGS / SCHWERPUNKTE
   ========================================================= */

.hero-editorial .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    width: 100%;
    max-width: 700px;
    margin-top: 34px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-editorial .hero-meta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 6px 12px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    background: rgba(6, 29, 32, 0.62);
    color: rgba(255, 255, 255, 0.86);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;

    backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Alten Trennpunkt sicher entfernen */
.hero-editorial .hero-meta span::after {
    display: none !important;
}

@media (max-width: 680px) {
    .hero-editorial .hero-meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 7px 8px;

        width: 100%;
        max-width: 100%;

        margin-top: 25px;
        padding-top: 17px;

        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .hero-editorial .hero-meta span {
        display: inline-flex;
        flex: 0 0 auto;

        width: auto;
        min-height: 0;
        max-width: 100%;

        padding: 3px 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        backdrop-filter: none;

        color: rgba(255, 255, 255, 0.7);

        font-size: 10px;
        font-weight: 650;
        line-height: 1.35;
        letter-spacing: 0.01em;
        white-space: normal;
    }

    .hero-editorial .hero-meta span::before {
        content: "#";
        margin-right: 2px;
        color: #e59a79;
        font-weight: 800;
    }

    .hero-editorial .hero-meta span::after {
        display: none !important;
    }
}

@media (max-width: 680px) {
    .hero-editorial .hero-meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 7px 8px;

        width: 100%;
        max-width: 100%;

        margin-top: 25px;
        padding-top: 17px;

        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .hero-editorial .hero-meta span {
        display: inline-flex;
        flex: 0 0 auto;

        width: auto;
        min-height: 0;
        max-width: 100%;

        padding: 3px 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        backdrop-filter: none;

        color: rgba(255, 255, 255, 0.7);

        font-size: 10px;
        font-weight: 650;
        line-height: 1.35;
        letter-spacing: 0.01em;
        white-space: normal;
    }

    .hero-editorial .hero-meta span::before {
        content: "#";
        margin-right: 2px;
        color: #e59a79;
        font-weight: 800;
    }

    .hero-editorial .hero-meta span::after {
        display: none !important;
    }
}@media (max-width: 390px) {
    .hero-editorial .hero-meta {
        gap: 5px 7px;
        margin-top: 22px;
        padding-top: 14px;
    }

    .hero-editorial .hero-meta span {
        padding: 2px 0;
        font-size: 9px;
    }
}

/* =========================================================
   EDITORIAL REFERENCE SECTION
   ========================================================= */

.reference-section {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(184, 101, 66, 0.18),
            transparent 28%
        ),
        #071f22;
    color: #fff;
}

.reference-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
    mask-image: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.65),
        transparent
    );
}

.reference-section .shell {
    position: relative;
    z-index: 1;
}

.reference-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 80px;
    align-items: end;

    margin-bottom: 58px;
}

.reference-intro h2 {
    max-width: 780px;
    margin: 0;

    color: #fff;
    font-size: clamp(38px, 3.5vw, 54px);
    line-height: 1.07;
    letter-spacing: -0.04em;
}

.reference-intro > p {
    max-width: 470px;
    margin: 0;

    color: rgba(255, 255, 255, 0.64);
    font-size: 17px;
    line-height: 1.65;
}

/* Große Leitgeschichte */

.reference-feature {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.58fr);
    gap: 70px;

    padding: 55px 0 64px;

    border-top: 1px solid rgba(255, 255, 255, 0.23);
    border-bottom: 1px solid rgba(255, 255, 255, 0.23);
}

.reference-feature-number {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    min-height: 280px;
}

.reference-feature-number strong {
    color: #efad90;
    font-size: clamp(88px, 10vw, 154px);
    font-weight: 760;
    line-height: 0.82;
    letter-spacing: -0.08em;
}

.reference-feature-number span {
    max-width: 140px;

    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reference-feature-content {
    max-width: 900px;
}

.reference-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;

    margin-bottom: 34px;
}

.reference-meta span {
    color: #efad90;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.reference-meta small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
}

.reference-feature h3 {
    max-width: 900px;
    margin-bottom: 25px;

    color: #fff;
    font-size: clamp(34px, 3.3vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.reference-feature-content > p {
    max-width: 780px;
    margin-bottom: 31px;

    color: rgba(255, 255, 255, 0.67);
    font-size: 18px;
    line-height: 1.7;
}

.reference-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
}

.reference-tags span {
    position: relative;

    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 700;
}

.reference-tags span::before {
    content: "#";
    margin-right: 2px;
    color: #df8d66;
}

/* Projektzeilen */

.reference-list {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.reference-row {
    display: grid;
    grid-template-columns: 50px 210px minmax(0, 1fr) 35px;
    gap: 30px;
    align-items: start;

    padding: 43px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.reference-row:last-child {
    border-bottom: 0;
}

.reference-index {
    padding-top: 5px;

    color: #df8d66;
    font-size: 11px;
    font-weight: 850;
}

.reference-row-meta {
    display: grid;
    gap: 7px;
    padding-top: 3px;
}

.reference-row-meta strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.4;
}

.reference-row-meta span {
    color: rgba(255, 255, 255, 0.43);
    font-size: 11px;
}

.reference-row-content {
    max-width: 760px;
}

.reference-row-content h3 {
    margin-bottom: 13px;

    color: #fff;
    font-size: clamp(25px, 2.25vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.reference-row-content p {
    max-width: 700px;
    margin: 0;

    color: rgba(255, 255, 255, 0.59);
    font-size: 15px;
    line-height: 1.65;
}

.reference-arrow {
    padding-top: 3px;

    color: #df8d66;
    font-size: 24px;
    line-height: 1;
}

.reference-footer {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    align-items: center;

    padding-top: 38px;
}

.reference-footer p {
    max-width: 550px;
    margin: 0;

    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
}

/* =========================================================
   REFERENCE SECTION – TABLET
   ========================================================= */

@media (max-width: 1000px) {
    .reference-intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .reference-feature {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 45px;
    }

    .reference-row {
        grid-template-columns: 40px 170px minmax(0, 1fr) 30px;
        gap: 20px;
    }
}

/* =========================================================
   REFERENCE SECTION – MOBILE
   ========================================================= */

@media (max-width: 680px) {
    .reference-section {
        padding: 67px 0;
    }

    .reference-intro {
        gap: 20px;
        margin-bottom: 39px;
    }

    .reference-intro h2 {
        font-size: clamp(31px, 8.6vw, 39px);
    }

    .reference-intro > p {
        font-size: 15px;
    }

    .reference-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;

        padding: 37px 0 42px;
    }

    .reference-feature-number {
        min-height: 0;
    }

    .reference-feature-number strong {
        font-size: 82px;
    }

    .reference-feature-number span {
        max-width: none;
        margin-top: 15px;
    }

    .reference-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;

        margin-bottom: 24px;
    }

    .reference-feature h3 {
        font-size: clamp(29px, 8vw, 36px);
    }

    .reference-feature-content > p {
        font-size: 16px;
    }

    .reference-row {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 13px;

        padding: 31px 0;
    }

    .reference-index {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .reference-row-meta {
        grid-column: 2;
    }

    .reference-row-content {
        grid-column: 2;
    }

    .reference-row-content h3 {
        font-size: 26px;
    }

    .reference-row-content p {
        font-size: 15px;
    }

    .reference-arrow {
        display: none;
    }

    .reference-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;

        padding-top: 31px;
    }

    .reference-footer .button {
        width: 100%;
    }
}

/* =========================================================
   SOLUTIONS ATLAS
   Drei gleichwertige Spalten auf Desktop
   ========================================================= */

.solutions-atlas {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: #f7f5ef;
}

.solutions-atlas::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -160px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: rgba(184, 101, 66, 0.09);
    filter: blur(4px);
    pointer-events: none;
}

.solutions-atlas .shell {
    position: relative;
    z-index: 1;
}

.solutions-atlas-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 58px;
}

.solutions-atlas-header > *,
.solutions-atlas-grid > *,
.solution-family-header > *,
.solution-family-list a > * {
    min-width: 0;
}

.solutions-atlas-header h2 {
    max-width: 740px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(36px, 3.4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.solutions-atlas-intro {
    max-width: 570px;
}

.solutions-atlas-intro p {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.solutions-atlas-intro p:last-child {
    margin-bottom: 0;
}

.solutions-atlas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.solution-family {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 30px 28px;
    border-top: 4px solid var(--ink);
    background: #fff;
}

.solution-family-erp,
.solution-family-finance,
.solution-family-commerce {
    grid-row: auto;
}

.solution-family-finance {
    background: #e9e4da;
}

.solution-family-commerce {
    background: var(--ink);
    color: #fff;
}

.solution-family-header {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

.solution-family-header > span {
    padding-top: 5px;
    color: var(--copper);
    font-size: 11px;
    font-weight: 850;
}

.solution-family-header p {
    margin-bottom: 7px;
    color: var(--copper2);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.solution-family-header h3 {
    max-width: 100%;
    margin: 0;
    color: var(--ink);
    font-size: clamp(23px, 1.75vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.solution-family-commerce .solution-family-header h3 {
    color: #fff;
}

.solution-family-commerce .solution-family-header p {
    color: #efad90;
}

.solution-family-list {
    flex: 1;
    border-top: 1px solid var(--line);
}

.solution-family-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 7px 12px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left 0.2s ease, color 0.2s ease;
}

.solution-family-list a:hover {
    padding-left: 7px;
}

.solution-family-list strong {
    grid-column: 1;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.3;
}

.solution-family-list span {
    grid-column: 1;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.solution-family-list i {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--copper);
    font-size: 18px;
    font-style: normal;
}

.solution-family-commerce .solution-family-list {
    border-color: rgba(255, 255, 255, 0.18);
}

.solution-family-commerce .solution-family-list a {
    border-color: rgba(255, 255, 255, 0.18);
}

.solution-family-commerce .solution-family-list strong {
    color: #fff;
}

.solution-family-commerce .solution-family-list span {
    color: rgba(255, 255, 255, 0.62);
}

.solutions-atlas-footer {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    padding-top: 31px;
    border-top: 1px solid var(--line);
}

.solutions-atlas-footer > div {
    max-width: 680px;
}

.solutions-atlas-footer strong {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
}

.solutions-atlas-footer p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   SOLUTIONS ATLAS – MEDIUM DESKTOP / TABLET
   ========================================================= */

@media (max-width: 1180px) {
    .solutions-atlas-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .solutions-atlas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-family-commerce {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .solutions-atlas-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .solution-family-commerce {
        grid-column: auto;
    }
}

/* =========================================================
   SOLUTIONS ATLAS – MOBILE
   ========================================================= */

@media (max-width: 680px) {
    .solutions-atlas {
        padding: 66px 0;
    }

    .solutions-atlas-header {
        margin-bottom: 36px;
    }

    .solutions-atlas-header h2 {
        font-size: clamp(30px, 8.3vw, 37px);
    }

    .solutions-atlas-intro p {
        font-size: 15px;
    }

    .solutions-atlas-grid {
        gap: 13px;
    }

    .solution-family {
        padding: 24px 20px;
    }

    .solution-family-header {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 25px;
    }

    .solution-family-header h3 {
        font-size: 23px;
    }

    .solution-family-list a {
        grid-template-columns: minmax(0, 1fr) 20px;
        gap: 6px 12px;
        padding: 18px 0;
    }

    .solution-family-list strong {
        font-size: 17px;
    }

    .solution-family-list span {
        font-size: 13px;
    }

    .solutions-atlas-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 21px;
        margin-top: 27px;
    }

    .solutions-atlas-footer .button {
        width: 100%;
    }
}

/* =========================================================
   ÜBER UNS – STARTSEITEN-PROFIL
   ========================================================= */

.about-preview {
    position: relative;
    overflow: hidden;
}

.about-preview::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;

    width: 480px;
    height: 480px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);
    pointer-events: none;
}

.about-preview .shell {
    position: relative;
    z-index: 1;
}

.profile-grid {
    display: grid;
    grid-template-columns:
        minmax(440px, 0.95fr)
        minmax(0, 1.05fr);
    gap: clamp(55px, 6vw, 96px);
    align-items: center;
}

.profile-photo {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;

    background: var(--ink);
}

.profile-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(4, 23, 26, 0.12) 66%,
            rgba(4, 23, 26, 0.88) 100%
        );
}

.profile-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: 47% center;

    filter:
        saturate(0.92)
        contrast(1.02);

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.profile-photo:hover img {
    transform: scale(1.018);
    filter:
        saturate(1)
        contrast(1.03);
}

.profile-photo figcaption {
    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 27px;

    display: grid;
    gap: 3px;

    color: #fff;
}

.profile-photo figcaption strong {
    font-size: 17px;
    line-height: 1.3;
}

.profile-photo figcaption span {
    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: 0.025em;
}

.profile-copy {
    min-width: 0;
}

.profile-copy h2 {
    max-width: 690px;
    margin-bottom: 25px;

    font-size: clamp(36px, 3.2vw, 49px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.profile-copy .lead {
    max-width: 680px;
    margin-bottom: 23px;

    color: var(--ink);
    font-size: clamp(20px, 1.55vw, 24px);
    line-height: 1.55;
}

.profile-copy > p:not(.eyebrow):not(.lead) {
    max-width: 670px;
    margin-bottom: 17px;

    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.profile-copy .button {
    margin-top: 12px;
}


/* =========================================================
   ÜBER UNS – TABLET
   ========================================================= */

@media (max-width: 1000px) {
    .profile-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 45px;
    }

    .profile-photo img {
        aspect-ratio: 4 / 5.3;
    }

    .profile-copy h2 {
        font-size: clamp(34px, 4.5vw, 44px);
    }
}


/* =========================================================
   ÜBER UNS – MOBILE
   ========================================================= */

@media (max-width: 760px) {
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .profile-photo {
        width: 100%;
    }

    .profile-photo img {
        aspect-ratio: 4 / 4.7;
        object-position: 48% 32%;
    }

    .profile-photo figcaption {
        left: 20px;
        right: 20px;
        bottom: 19px;
    }

    .profile-photo figcaption strong {
        font-size: 16px;
    }

    .profile-copy h2 {
        font-size: clamp(30px, 8.3vw, 38px);
    }

    .profile-copy .lead {
        font-size: 19px;
    }

    .profile-copy > p:not(.eyebrow):not(.lead) {
        font-size: 15px;
        line-height: 1.65;
    }

    .profile-copy .button {
        width: 100%;
    }
}


/* =========================================================
   ÜBER UNS – SEHR KLEINE DISPLAYS
   ========================================================= */

@media (max-width: 390px) {
    .profile-photo img {
        aspect-ratio: 1 / 1.22;
    }

    .profile-photo figcaption span {
        font-size: 10px;
    }
}

/* =========================================================
   ÜBER UNS – KOMPAKTERE DARSTELLUNG
   Temporärer Override am Ende der app.css
   ========================================================= */

.about-preview {
    padding-top: 82px;
    padding-bottom: 82px;
}

.about-preview .profile-grid {
    grid-template-columns:
        minmax(300px, 0.72fr)
        minmax(0, 1.28fr);

    gap: clamp(58px, 6.5vw, 104px);
    align-items: center;
}

/* Foto deutlich zurücknehmen */
.about-preview .profile-photo {
    width: 100%;
    max-width: 470px;
    margin: 0;
    justify-self: start;
}

/* Weniger hohe, ruhigere Darstellung */
.about-preview .profile-photo img {
    width: 100%;
    height: 550px;
    aspect-ratio: auto;

    object-fit: cover;
    object-position: 48% center;
}

/* Verlauf im unteren Bildbereich dezenter */
.about-preview .profile-photo::after {
    background:
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(4, 23, 26, 0.08) 72%,
            rgba(4, 23, 26, 0.76) 100%
        );
}

/* Bildbeschriftung kleiner und unaufdringlicher */
.about-preview .profile-photo figcaption {
    left: 21px;
    right: 21px;
    bottom: 18px;
    gap: 2px;
}

.about-preview .profile-photo figcaption strong {
    font-size: 14px;
    line-height: 1.3;
}

.about-preview .profile-photo figcaption span {
    max-width: 390px;

    font-size: 9px;
    line-height: 1.45;
    letter-spacing: 0.015em;
}

/* Textbereich nicht unnötig breit werden lassen */
.about-preview .profile-copy {
    max-width: 700px;
}

/* Headline kleiner und weniger dominant */
.about-preview .profile-copy h2 {
    max-width: 620px;
    margin-bottom: 22px;

    font-size: clamp(34px, 2.7vw, 43px);
    line-height: 1.09;
}

/* Einleitung ebenfalls etwas ruhiger */
.about-preview .profile-copy .lead {
    max-width: 650px;
    margin-bottom: 21px;

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}

.about-preview .profile-copy > p:not(.eyebrow):not(.lead) {
    max-width: 650px;

    font-size: 15px;
    line-height: 1.7;
}

.about-preview .profile-copy .button {
    min-height: 49px;
    margin-top: 9px;
}


/* =========================================================
   ÜBER UNS – MITTLERE DESKTOPS / TABLETS
   ========================================================= */

@media (max-width: 1100px) {
    .about-preview .profile-grid {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 48px;
    }

    .about-preview .profile-photo {
        max-width: 440px;
    }

    .about-preview .profile-photo img {
        height: 530px;
    }

    .about-preview .profile-copy h2 {
        font-size: clamp(32px, 3.6vw, 40px);
    }
}


/* =========================================================
   ÜBER UNS – TABLET UND MOBILE
   ========================================================= */

@media (max-width: 760px) {
    .about-preview {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .about-preview .profile-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .about-preview .profile-photo {
        width: 100%;
        max-width: 480px;
        justify-self: center;
    }

    .about-preview .profile-photo img {
        height: auto;
        aspect-ratio: 4 / 4.8;
        object-position: 48% 30%;
    }

    .about-preview .profile-copy {
        width: 100%;
        max-width: none;
    }

    .about-preview .profile-copy h2 {
        max-width: 100%;

        font-size: clamp(29px, 8vw, 37px);
        line-height: 1.1;
    }

    .about-preview .profile-copy .lead {
        font-size: 19px;
        line-height: 1.55;
    }

    .about-preview .profile-copy > p:not(.eyebrow):not(.lead) {
        font-size: 15px;
        line-height: 1.65;
    }

    .about-preview .profile-copy .button {
        width: 100%;
    }
}


/* =========================================================
   ÜBER UNS – KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {
    .about-preview {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .about-preview .profile-photo {
        max-width: 100%;
    }

    .about-preview .profile-photo img {
        aspect-ratio: 1 / 1.18;
    }

    .about-preview .profile-photo figcaption {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }

    .about-preview .profile-photo figcaption strong {
        font-size: 13px;
    }

    .about-preview .profile-photo figcaption span {
        font-size: 8px;
    }
}
/* =========================================================
   2026 SUBPAGE SYSTEM
   ========================================================= */

.section-paper{background:#f3f0e9}

/* =========================================================
   2026 SUBPAGE HERO
   Bild stärker sichtbar, Text weiterhin sauber lesbar
   ========================================================= */

.subhero {
    position: relative;
    min-height: 700px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
    isolation: isolate;

    background: #061b1e;
    color: #fff;
}


/* ---------------------------------------------------------
   Hintergrundbild
   --------------------------------------------------------- */

.subhero-image {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: var(--subhero-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    transform: scale(1.01);
}


/* ---------------------------------------------------------
   Hauptabdunklung

   Der Verlauf bleibt hauptsächlich hinter dem Text.
   Die Bildmitte und rechte Seite werden deutlich weniger
   überlagert als bisher.
   --------------------------------------------------------- */

.subhero-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse 58% 82% at 20% 58%,
            rgba(3, 20, 23, 0.66) 0%,
            rgba(3, 20, 23, 0.52) 38%,
            rgba(3, 20, 23, 0.24) 66%,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            rgba(3, 20, 23, 0.76) 0%,
            rgba(3, 20, 23, 0.58) 22%,
            rgba(3, 20, 23, 0.32) 42%,
            rgba(3, 20, 23, 0.12) 62%,
            rgba(3, 20, 23, 0.03) 82%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 20, 23, 0.18) 0%,
            transparent 34%,
            rgba(3, 20, 23, 0.16) 72%,
            rgba(3, 20, 23, 0.55) 100%
        );
}


/* ---------------------------------------------------------
   Atmosphärisches Kupferlicht
   --------------------------------------------------------- */

.subhero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 33%,
            rgba(219, 119, 62, 0.12),
            transparent 29%
        ),
        radial-gradient(
            circle at 43% 49%,
            rgba(226, 132, 75, 0.055),
            transparent 24%
        );
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

.subhero-content {
    position: relative;
    z-index: 2;

    padding-top: 170px;
    padding-bottom: 72px;

    color: #fff;
}


/* ---------------------------------------------------------
   Eyebrow
   --------------------------------------------------------- */

.subhero-content .eyebrow {
    max-width: 720px;
    margin-bottom: 20px;

    color: #efaa8c;
}


/* ---------------------------------------------------------
   Hauptüberschrift
   --------------------------------------------------------- */

.subhero-content h1 {
    max-width: 760px;
    margin-bottom: 24px;

    color: #fff;

    font-size: clamp(45px, 4.35vw, 66px);
    font-weight: 760;
    line-height: 1.03;
    letter-spacing: -0.045em;

    text-wrap: balance;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, 0.24),
        0 8px 32px rgba(0, 0, 0, 0.16);
}


/* ---------------------------------------------------------
   Einleitung
   --------------------------------------------------------- */

.subhero-lead {
    max-width: 700px;
    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(18px, 1.25vw, 20px);
    line-height: 1.65;

    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}


/* ---------------------------------------------------------
   Themenschwerpunkte
   --------------------------------------------------------- */

.subhero-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    width: 100%;
    max-width: 720px;

    margin-top: 31px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
}


.subhero-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 5px 11px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    background: rgba(5, 30, 33, 0.48);
    color: rgba(255, 255, 255, 0.82);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;

    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}


.subhero-content > .button {
    margin-top: 28px;
}


/* =========================================================
   SUBPAGE HERO – MITTLERE DESKTOPS / TABLETS
   ========================================================= */

@media (max-width: 1100px) {

    .subhero {
        min-height: 650px;
    }

    .subhero-content h1 {
        max-width: 700px;
    }

    .subhero-image::after {
        background:
            radial-gradient(
                ellipse 70% 88% at 22% 58%,
                rgba(3, 20, 23, 0.72) 0%,
                rgba(3, 20, 23, 0.52) 43%,
                rgba(3, 20, 23, 0.2) 72%,
                transparent 100%
            ),
            linear-gradient(
                90deg,
                rgba(3, 20, 23, 0.76) 0%,
                rgba(3, 20, 23, 0.55) 34%,
                rgba(3, 20, 23, 0.24) 63%,
                rgba(3, 20, 23, 0.06) 100%
            ),
            linear-gradient(
                180deg,
                rgba(3, 20, 23, 0.2) 0%,
                transparent 34%,
                rgba(3, 20, 23, 0.54) 100%
            );
    }
}


/* =========================================================
   SUBPAGE HERO – TABLET
   ========================================================= */

@media (max-width: 820px) {

    .subhero {
        min-height: 670px;
    }

    .subhero-image {
        background-position: 57% center;
    }

    .subhero-image::after {
        background:
            linear-gradient(
                90deg,
                rgba(3, 20, 23, 0.78) 0%,
                rgba(3, 20, 23, 0.62) 42%,
                rgba(3, 20, 23, 0.28) 76%,
                rgba(3, 20, 23, 0.12) 100%
            ),
            linear-gradient(
                180deg,
                rgba(3, 20, 23, 0.24) 0%,
                rgba(3, 20, 23, 0.08) 32%,
                rgba(3, 20, 23, 0.7) 100%
            );
    }

    .subhero-content {
        padding-top: 145px;
        padding-bottom: 55px;
    }

    .subhero-content h1 {
        max-width: 660px;
    }

    .subhero-lead {
        max-width: 620px;
    }
}


/* =========================================================
   SUBPAGE HERO – SMARTPHONE
   ========================================================= */

@media (max-width: 680px) {

    .subhero {
        min-height: 690px;
    }

    .subhero-image {
        background-position: 60% center;
        transform: scale(1.01);
    }

    .subhero-image::after {
        background:
            linear-gradient(
                180deg,
                rgba(3, 20, 23, 0.38) 0%,
                rgba(3, 20, 23, 0.32) 23%,
                rgba(3, 20, 23, 0.68) 54%,
                rgba(3, 20, 23, 0.92) 76%,
                rgba(3, 20, 23, 0.99) 100%
            );
    }

    .subhero-shade {
        background:
            radial-gradient(
                circle at 73% 24%,
                rgba(219, 119, 62, 0.1),
                transparent 31%
            );
    }

    .subhero-content {
        width: 100%;
        max-width: none;

        padding-top: 120px;
        padding-bottom: 38px;
    }

    .subhero-content h1 {
        max-width: 100%;
        margin-bottom: 20px;

        font-size: clamp(34px, 9.8vw, 43px);
        line-height: 1.05;
        letter-spacing: -0.04em;

        text-wrap: pretty;
    }

    .subhero-lead {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.58;
    }

    .subhero-tags {
        gap: 5px 8px;

        max-width: 100%;

        margin-top: 22px;
        padding-top: 14px;
    }

    .subhero-tags span {
        width: auto;
        min-height: 0;
        padding: 2px 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        backdrop-filter: none;

        color: rgba(255, 255, 255, 0.72);

        font-size: 9px;
        line-height: 1.35;
    }

    .subhero-tags span::before {
        content: "#";

        margin-right: 2px;

        color: #e59a79;
        font-weight: 800;
    }
}


/* =========================================================
   SUBPAGE HERO – SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .subhero {
        min-height: 680px;
    }

    .subhero-content {
        padding-top: 110px;
        padding-bottom: 34px;
    }

    .subhero-content h1 {
        font-size: clamp(33px, 9.5vw, 39px);
    }

    .subhero-tags {
        gap: 5px 7px;
        margin-top: 20px;
        padding-top: 13px;
    }

    .subhero-tags span {
        font-size: 9px;
    }
}

.sub-intro-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(55px,7vw,110px);align-items:start}
.sub-intro-grid h2{max-width:620px;font-size:clamp(34px,3.15vw,47px);line-height:1.1}
.sub-intro-grid .lead{margin-bottom:18px;color:var(--ink);font-size:clamp(20px,1.45vw,23px);line-height:1.55}
.sub-intro-grid>div:last-child>p:not(.lead){max-width:700px;color:var(--muted);font-size:16px;line-height:1.75}

.solution-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.solution-paths a{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:20px;padding:34px 30px 34px 0;border-bottom:1px solid var(--line);min-width:0}
.solution-paths a:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}
.solution-paths span{padding-top:5px;color:var(--copper);font-size:11px;font-weight:850}
.solution-paths h3{margin:0 0 10px;font-size:28px;line-height:1.12}
.solution-paths p{grid-column:2;margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.solution-paths i{grid-column:3;grid-row:1/3;color:var(--copper);font-size:20px;font-style:normal}

.decision-stage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.decision-stage h2{max-width:620px;color:#fff;font-size:clamp(35px,3.2vw,48px)}
.decision-steps{border-top:1px solid rgba(255,255,255,.2)}
.decision-steps article{display:grid;grid-template-columns:42px 160px minmax(0,1fr);gap:18px;padding:23px 0;border-bottom:1px solid rgba(255,255,255,.17)}
.decision-steps span{color:#efad90;font-size:11px;font-weight:850}
.decision-steps h3{margin:0;color:#fff;font-size:21px}
.decision-steps p{margin:0;color:rgba(255,255,255,.62);font-size:14px}

.page-cta{display:flex;gap:40px;justify-content:space-between;align-items:center}
.page-cta h2{max-width:850px;margin:0;font-size:clamp(33px,3vw,45px)}
.page-cta p{max-width:720px;color:var(--muted)}
.page-cta-dark h2{color:#fff}.page-cta-dark p{color:rgba(255,255,255,.62)}

.capability-lines{border-top:1px solid var(--line)}
.capability-lines article{display:grid;grid-template-columns:55px minmax(0,1fr);gap:25px;padding:31px 0;border-bottom:1px solid var(--line)}
.capability-lines span{padding-top:5px;color:var(--copper);font-size:11px;font-weight:850}
.capability-lines h3{margin-bottom:8px;font-size:28px}
.capability-lines p{max-width:780px;margin:0;color:var(--muted)}

.split-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:80px;align-items:end}
.split-statement h2{max-width:760px;color:#fff;font-size:clamp(35px,3.25vw,49px)}
.split-statement>div:last-child p{color:rgba(255,255,255,.73);font-size:17px;line-height:1.7}
.split-statement .button{margin-top:12px}

.commerce-stream,.suitability-grid,.interface-stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.commerce-stream article,.suitability-grid article,.interface-stack article{padding:27px 24px;border-top:3px solid var(--ink);background:#fff;min-width:0}
.commerce-stream span,.suitability-grid span,.interface-stack span{color:var(--copper);font-size:11px;font-weight:850}
.commerce-stream h3,.suitability-grid h3,.interface-stack h3{margin-top:24px;font-size:23px;line-height:1.14}
.commerce-stream p,.suitability-grid p,.interface-stack p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

.project-highlight{display:grid;grid-template-columns:minmax(180px,.38fr) minmax(0,1.62fr);gap:70px;align-items:start}
.project-highlight-number{color:#efad90;font-size:clamp(82px,9vw,142px);font-weight:780;line-height:.85;letter-spacing:-.08em}
.project-highlight h2{max-width:850px;color:#fff;font-size:clamp(35px,3.25vw,49px)}
.project-highlight p{max-width:760px;color:rgba(255,255,255,.66);font-size:17px;line-height:1.7}
.project-highlight .button{margin-top:12px}

.automation-timeline{position:relative;border-top:1px solid var(--line)}
.automation-timeline article{display:grid;grid-template-columns:65px minmax(0,1fr);gap:26px;padding:28px 0;border-bottom:1px solid var(--line)}
.automation-timeline span{color:var(--copper);font-size:11px;font-weight:850}
.automation-timeline h3{margin-bottom:8px;font-size:27px}
.automation-timeline p{max-width:760px;margin:0;color:var(--muted)}

.reference-page-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);gap:80px;align-items:end}
.reference-page-intro h2{max-width:720px;font-size:clamp(34px,3.2vw,48px)}
.reference-page-intro>p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.reference-dossiers{display:grid;gap:20px}
.reference-dossier{display:grid;grid-template-columns:55px 210px minmax(0,1fr);gap:34px;padding:46px 42px;background:#fff;border-top:4px solid var(--ink);scroll-margin-top:110px}
.dossier-no{color:var(--copper);font-size:11px;font-weight:850}
.dossier-meta{display:grid;align-content:start;gap:8px}
.dossier-meta strong{font-size:14px}.dossier-meta span{color:var(--copper2);font-size:11px;font-weight:800}.dossier-meta small{color:var(--muted);font-size:12px}
.dossier-main h2{max-width:820px;font-size:clamp(31px,2.9vw,43px)}
.dossier-main .lead{max-width:860px;color:var(--ink);font-size:20px;line-height:1.55}
.dossier-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.dossier-columns h3{font-size:16px}.dossier-columns p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

.developed-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.developed-groups>section{display:flex;flex-direction:column;min-width:0;padding:30px 27px;border-top:4px solid var(--ink);background:#fff}
.developed-groups>section:nth-child(2){background:#e9e4da}.developed-groups>section:nth-child(3){background:var(--ink);color:#fff}
.developed-groups header{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;margin-bottom:25px}
.developed-groups header>span{padding-top:4px;color:var(--copper);font-size:11px;font-weight:850}
.developed-groups header p{margin-bottom:6px;color:var(--copper2);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.developed-groups>section:nth-child(3) header p{color:#efad90}
.developed-groups header h2{margin:0;font-size:24px;line-height:1.12}
.developed-groups>section:nth-child(3) h2{color:#fff}
.developed-items{flex:1;border-top:1px solid var(--line)}
.developed-groups>section:nth-child(3) .developed-items{border-color:rgba(255,255,255,.18)}
.developed-items article{padding:19px 0;border-bottom:1px solid var(--line)}
.developed-groups>section:nth-child(3) .developed-items article{border-color:rgba(255,255,255,.18)}
.developed-items h3{margin-bottom:6px;font-size:18px}.developed-groups>section:nth-child(3) h3{color:#fff}
.developed-items p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.developed-groups>section:nth-child(3) p{color:rgba(255,255,255,.62)}
.understated-note{display:flex;gap:36px;justify-content:space-between;align-items:flex-start;padding-top:28px;border-top:1px solid var(--line)}
.understated-note strong{font-size:17px}.understated-note p{max-width:760px;margin:0;color:var(--muted)}

.about-detail{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:clamp(55px,7vw,105px);align-items:center}
.about-detail figure{position:relative;margin:0;overflow:hidden;background:var(--ink);max-width:490px}
.about-detail figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(4,23,26,.8));pointer-events:none}
.about-detail img{width:100%;height:575px;object-fit:cover;object-position:48% center}
.about-detail figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;display:grid;color:#fff}
.about-detail figcaption strong{font-size:15px}.about-detail figcaption span{color:rgba(255,255,255,.67);font-size:9px}
.about-detail h2{max-width:670px;font-size:clamp(35px,3.1vw,47px)}
.about-detail .lead{font-size:22px;line-height:1.55}.about-detail>div>p:not(.eyebrow):not(.lead){color:var(--muted);line-height:1.75}
.values-editorial{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.values-editorial article{padding-top:23px;border-top:1px solid rgba(255,255,255,.2)}
.values-editorial span{color:#efad90;font-size:11px;font-weight:850}.values-editorial h2{margin-top:24px;color:#fff;font-size:28px}.values-editorial p{margin:0;color:rgba(255,255,255,.62);font-size:14px}

.contact-editorial{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(60px,8vw,120px);align-items:start}
.contact-editorial aside h2{max-width:560px;font-size:clamp(35px,3.2vw,48px)}
.contact-editorial aside .lead{max-width:600px;color:var(--muted);font-size:18px;line-height:1.7}
.contact-facts{margin-top:38px;border-top:1px solid var(--line)}
.contact-facts>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-facts span{color:var(--copper2);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}
.contact-facts a{font-weight:850}.contact-facts p{margin:0;color:var(--muted);font-size:14px}
.contact-form-editorial{display:grid;gap:18px;padding:34px;background:#f3f0e9;border-top:4px solid var(--ink)}
.contact-form-editorial label{display:grid;gap:8px;font-size:13px;font-weight:750}
.contact-form-editorial input,.contact-form-editorial select,.contact-form-editorial textarea{width:100%;padding:15px;border:1px solid var(--line);background:#fff;font:inherit}
.contact-form-editorial textarea{min-height:190px;resize:vertical}

@media(max-width:1100px){
.subhero{min-height:650px}.subhero-content h1{max-width:760px}
.commerce-stream,.suitability-grid,.interface-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
.developed-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.developed-groups>section:last-child{grid-column:1/-1}
.values-editorial{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:820px){
.sub-intro-grid,.decision-stage,.split-statement,.reference-page-intro,.contact-editorial,.about-detail{grid-template-columns:minmax(0,1fr);gap:36px}
.solution-paths{grid-template-columns:minmax(0,1fr)}.solution-paths a:nth-child(even){padding-left:0;border-left:0}
.project-highlight{grid-template-columns:minmax(0,1fr);gap:30px}.project-highlight-number{font-size:82px}
.reference-dossier{grid-template-columns:40px minmax(0,1fr);gap:20px;padding:34px 28px}.dossier-meta{grid-column:2}.dossier-main{grid-column:2}.dossier-columns{grid-template-columns:minmax(0,1fr)}
.developed-groups{grid-template-columns:minmax(0,1fr)}.developed-groups>section:last-child{grid-column:auto}
.about-detail figure{justify-self:center;width:100%}
.page-cta{align-items:flex-start}
}

@media(max-width:680px){
.subhero{min-height:690px}.subhero-image{background-position:60% center}.subhero-image:after{background:linear-gradient(180deg,rgba(3,20,23,.56) 0%,rgba(3,20,23,.62) 30%,rgba(3,20,23,.91) 67%,rgba(3,20,23,.99) 100%)}
.subhero-content{padding-top:120px;padding-bottom:38px}.subhero-content h1{font-size:clamp(34px,9.8vw,43px);line-height:1.05}.subhero-lead{font-size:16px}.subhero-tags{gap:5px 8px;margin-top:22px;padding-top:14px}.subhero-tags span{padding:2px 0;border:0;background:transparent;border-radius:0;font-size:9px}.subhero-tags span:before{content:"#";margin-right:2px;color:#e59a79}
.sub-intro-grid h2{font-size:clamp(29px,8vw,36px)}
.solution-paths a{grid-template-columns:30px minmax(0,1fr) 20px;padding:25px 0}.solution-paths h3{font-size:23px}.solution-paths p{font-size:14px}
.decision-steps article{grid-template-columns:30px minmax(0,1fr);gap:10px}.decision-steps h3{font-size:20px}.decision-steps p{grid-column:2}
.page-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.page-cta .button{width:100%}.page-cta h2{font-size:clamp(29px,8vw,37px)}
.capability-lines article,.automation-timeline article{grid-template-columns:32px minmax(0,1fr);gap:12px;padding:24px 0}.capability-lines h3,.automation-timeline h3{font-size:23px}
.commerce-stream,.suitability-grid,.interface-stack{grid-template-columns:minmax(0,1fr);gap:12px}
.project-highlight h2{font-size:clamp(29px,8vw,37px)}
.reference-dossier{grid-template-columns:28px minmax(0,1fr);padding:27px 20px}.dossier-main h2{font-size:clamp(27px,7.6vw,34px)}.dossier-main .lead{font-size:17px}
.developed-groups>section{padding:24px 20px}.developed-groups header h2{font-size:22px}
.understated-note{display:grid;gap:10px}
.about-detail img{height:auto;aspect-ratio:4/4.8;object-position:48% 30%}.about-detail h2{font-size:clamp(29px,8vw,37px)}.about-detail .lead{font-size:19px}
.values-editorial{grid-template-columns:minmax(0,1fr);gap:20px}
.contact-form-editorial{padding:24px 20px}.contact-facts>div{grid-template-columns:80px minmax(0,1fr)}
}


/* =========================================================
   HERO-HÖHEN UND MOBILE DARSTELLUNG
   Startseite und Unterseiten
   ========================================================= */


/* ---------------------------------------------------------
   Desktop

   Startseite und Unterseiten erhalten dieselbe ruhige
   Grundhöhe. Der Inhalt darf die Höhe bei Bedarf erweitern.
   --------------------------------------------------------- */

.hero.hero-editorial,
.subhero {
    min-height: clamp(680px, 78vh, 790px);
}


/* ---------------------------------------------------------
   Mittlere Desktops und Tablets
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .hero.hero-editorial,
    .subhero {
        min-height: 680px;
    }
}


/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width: 680px) {

    /*
     * Die Startseite darf weiterhin etwas großzügiger sein.
     */

    .hero.hero-editorial {
        min-height: 650px;
    }


    /*
     * Unterseiten werden nicht mehr künstlich auf eine
     * feste Höhe gezogen. Die Höhe ergibt sich aus Inhalt
     * und Innenabständen.
     */

    .subhero {
        min-height: 0;
        height: auto;
        align-items: flex-end;
    }


    /*
     * Das Bild bleibt sichtbar, wird aber für das schmale
     * Hochformat sinnvoller positioniert.
     */

    .subhero-image {
        background-position: 48% center;
        transform: none;
    }


    /*
     * Oben bleibt genug Bildfläche sichtbar, ohne dass der
     * Hero fast den gesamten Bildschirm einnimmt.
     */

    .subhero-content {
        width: 100%;
        max-width: none;

        margin: 0;
        padding:
            190px
            20px
            34px;
    }


    /*
     * Überschriften auf Mobil nicht automatisch trennen.
     * Dadurch verschwindet „Vertriebspro-zesses“.
     */

    .subhero-content h1 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 18px;

        font-size: clamp(32px, 8.7vw, 37px);
        line-height: 1.07;
        letter-spacing: -0.038em;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: pretty;
    }


    .subhero-content .eyebrow {
        margin-bottom: 13px;

        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 0.12em;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }


    .subhero-lead {
        width: 100%;
        max-width: 100%;

        font-size: 15.5px;
        line-height: 1.58;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }


    .subhero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 9px;

        width: 100%;
        max-width: 100%;

        margin-top: 21px;
        padding-top: 14px;
    }


    .subhero-tags span {
        display: inline-flex;
        width: auto;
        max-width: 100%;

        padding: 2px 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        backdrop-filter: none;

        color: rgba(255, 255, 255, 0.72);

        font-size: 9px;
        font-weight: 700;
        line-height: 1.35;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }


    .subhero-tags span::before {
        content: "#";

        margin-right: 2px;

        color: #e59a79;
        font-weight: 800;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .hero.hero-editorial {
        min-height: 630px;
    }


    .subhero {
        min-height: 0;
    }


    .subhero-content {
        padding:
            170px
            18px
            31px;
    }


    .subhero-content h1 {
        font-size: clamp(30px, 8.7vw, 34px);
        line-height: 1.08;
    }


    .subhero-lead {
        font-size: 15px;
    }


    .subhero-tags {
        gap: 4px 8px;
        margin-top: 19px;
        padding-top: 13px;
    }


    .subhero-tags span {
        font-size: 8.5px;
    }
}

/* =========================================================
   ENTWICKELTE LÖSUNGEN – HISTORIE UND TIMELINE
   ========================================================= */

.solution-history-intro {
    position: relative;
    overflow: hidden;
}


.solution-history-intro::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -180px;

    width: 520px;
    height: 520px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.solution-history-intro .shell {
    position: relative;
    z-index: 1;
}


/* =========================================================
   TIMELINE – ÜBERSCHRIFT
   ========================================================= */

.solution-history {
    position: relative;
    overflow: hidden;
}


.solution-history-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);
    gap: clamp(50px, 7vw, 105px);
    align-items: end;

    margin-bottom: 65px;
}


.solution-history-header > * {
    min-width: 0;
}


.solution-history-header h2 {
    max-width: 790px;
    margin: 0;

    font-size: clamp(36px, 3.4vw, 51px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.solution-history-header > p {
    max-width: 500px;
    margin: 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.solution-timeline {
    position: relative;

    border-top: 1px solid var(--line);
}


.solution-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 198px;

    width: 1px;

    background: var(--line);

    pointer-events: none;
}


.solution-timeline-entry {
    position: relative;

    display: grid;
    grid-template-columns:
        165px
        minmax(0, 1fr);
    gap: 70px;

    padding: 54px 0 58px;

    border-bottom: 1px solid var(--line);
}


.solution-timeline-entry > * {
    min-width: 0;
}


.solution-timeline-period {
    position: relative;

    display: grid;
    align-content: start;
    gap: 12px;

    padding-top: 3px;
}


.solution-timeline-period::after {
    content: "";
    position: absolute;
    top: 7px;
    right: -41px;

    width: 9px;
    height: 9px;

    border: 4px solid var(--paper);
    border-radius: 50%;

    background: var(--copper);

    box-shadow: 0 0 0 1px rgba(184, 101, 66, 0.3);
}


.solution-timeline-period span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.1em;
}


.solution-timeline-period strong {
    color: var(--ink);

    font-size: clamp(21px, 1.7vw, 27px);
    line-height: 1.15;
    letter-spacing: -0.03em;
}


.solution-timeline-content {
    max-width: 950px;
}


.solution-timeline-category {
    margin-bottom: 13px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.solution-timeline-content h3 {
    max-width: 880px;
    margin-bottom: 20px;

    font-size: clamp(29px, 2.7vw, 41px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.solution-timeline-content > p:not(.solution-timeline-category) {
    max-width: 830px;
    margin-bottom: 15px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.72;
}


.solution-timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid var(--line);
}


.solution-timeline-tags span {
    position: relative;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}


.solution-timeline-tags span::before {
    content: "#";

    margin-right: 2px;

    color: var(--copper);
    font-weight: 850;
}


/* Hervorgehobener E-Commerce-Meilenstein */

.solution-timeline-entry-featured {
    margin-inline: -38px;
    padding-inline: 38px;

    background: #fff;
    border-top: 4px solid var(--ink);
}


.solution-timeline-entry-featured .solution-timeline-period::after {
    border-color: #fff;
}


/* Offener Abschluss */

.solution-timeline-entry-open {
    border-bottom: 0;
}


.solution-timeline-entry-open .solution-timeline-period span {
    font-size: 20px;
}


/* =========================================================
   TECHNISCHE KONTINUITÄT
   ========================================================= */

.solution-continuity-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, 0.85fr);
    gap: 75px;
    align-items: end;

    margin-bottom: 58px;
}


.solution-continuity-heading h2 {
    max-width: 850px;
    margin: 0;

    color: #fff;

    font-size: clamp(36px, 3.45vw, 51px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.solution-continuity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}


.solution-continuity-grid article {
    min-width: 0;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
}


.solution-continuity-grid span {
    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.solution-continuity-grid h3 {
    margin-top: 24px;
    margin-bottom: 13px;

    color: #fff;

    font-size: 25px;
    line-height: 1.15;
}


.solution-continuity-grid p {
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   AKTUELLE LÖSUNGEN
   ========================================================= */

.current-solutions-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.7fr);
    gap: clamp(50px, 7vw, 100px);
    align-items: end;

    margin-bottom: 58px;
}


.current-solutions-header > * {
    min-width: 0;
}


.current-solutions-header h2 {
    max-width: 780px;
    margin: 0;

    font-size: clamp(36px, 3.35vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.current-solutions-header > p {
    max-width: 510px;
    margin: 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .solution-history-header,
    .solution-continuity-heading,
    .current-solutions-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }


    .solution-timeline::before {
        left: 153px;
    }


    .solution-timeline-entry {
        grid-template-columns:
            125px
            minmax(0, 1fr);
        gap: 55px;
    }


    .solution-timeline-period::after {
        right: -34px;
    }


    .solution-continuity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .solution-history-header {
        margin-bottom: 38px;
    }


    .solution-history-header h2,
    .solution-continuity-heading h2,
    .current-solutions-header h2 {
        font-size: clamp(30px, 8.3vw, 38px);
        line-height: 1.09;
    }


    .solution-history-header > p,
    .current-solutions-header > p {
        font-size: 15px;
        line-height: 1.65;
    }


    .solution-timeline::before {
        left: 12px;
    }


    .solution-timeline-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;

        padding:
            38px
            0
            42px
            35px;
    }


    .solution-timeline-period {
        gap: 5px;
        padding: 0;
    }


    .solution-timeline-period::after {
        top: 4px;
        left: -27px;
        right: auto;

        width: 8px;
        height: 8px;

        border-width: 3px;
    }


    .solution-timeline-period span {
        font-size: 10px;
    }


    .solution-timeline-period strong {
        font-size: 20px;
    }


    .solution-timeline-content h3 {
        margin-bottom: 16px;

        font-size: clamp(27px, 7.6vw, 34px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .solution-timeline-content > p:not(.solution-timeline-category) {
        font-size: 15px;
        line-height: 1.65;
    }


    .solution-timeline-tags {
        gap: 5px 9px;

        margin-top: 21px;
        padding-top: 16px;
    }


    .solution-timeline-tags span {
        font-size: 10px;
    }


    .solution-timeline-entry-featured {
        margin-inline: -20px;
        padding-right: 20px;
        padding-left: 55px;
    }


    .solution-timeline-entry-featured .solution-timeline-period::after {
        left: -27px;
    }


    .solution-continuity-heading {
        margin-bottom: 38px;
    }


    .solution-continuity-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }


    .solution-continuity-grid h3 {
        margin-top: 18px;

        font-size: 23px;
    }


    .current-solutions-header {
        margin-bottom: 38px;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .solution-timeline-entry {
        padding-left: 31px;
    }


    .solution-timeline-period::after {
        left: -23px;
    }


    .solution-timeline-entry-featured {
        padding-left: 51px;
    }


    .solution-timeline-entry-featured .solution-timeline-period::after {
        left: -23px;
    }


    .solution-timeline-content h3 {
        font-size: clamp(25px, 7.4vw, 31px);
    }

}

/* =========================================================
   LÖSUNGEN – VERWEIS AUF ENTWICKLUNGSGESCHICHTE
   ========================================================= */

.solution-experience {
    position: relative;
    overflow: hidden;
}


.solution-experience::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -190px;

    width: 540px;
    height: 540px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.075);

    pointer-events: none;
}


.solution-experience .shell {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   Einleitung
   --------------------------------------------------------- */

.solution-experience-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 57px;
}


.solution-experience-intro > * {
    min-width: 0;
}


.solution-experience-intro h2 {
    max-width: 790px;
    margin: 0;

    font-size: clamp(36px, 3.35vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.solution-experience-intro .lead {
    max-width: 620px;
    margin-bottom: 17px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.solution-experience-intro > div:last-child > p:not(.lead) {
    max-width: 620px;
    margin-bottom: 20px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   Historische Entwicklungslinien
   --------------------------------------------------------- */

.solution-experience-lines {
    border-top: 1px solid var(--line);
}


.solution-experience-lines article {
    display: grid;
    grid-template-columns:
        160px
        minmax(0, 1fr);
    gap: 45px;
    align-items: start;

    padding: 28px 0;

    border-bottom: 1px solid var(--line);
}


.solution-experience-lines article > * {
    min-width: 0;
}


.solution-experience-lines article > span {
    padding-top: 5px;

    color: var(--copper2);

    font-size: 11px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.solution-experience-lines h3 {
    max-width: 760px;
    margin-bottom: 8px;

    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.13;
    letter-spacing: -0.035em;
}


.solution-experience-lines p {
    max-width: 790px;
    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .solution-experience-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px;

        margin-bottom: 44px;
    }


    .solution-experience-lines article {
        grid-template-columns:
            125px
            minmax(0, 1fr);
        gap: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .solution-experience-intro {
        margin-bottom: 35px;
    }


    .solution-experience-intro h2 {
        font-size: clamp(30px, 8.3vw, 38px);
        line-height: 1.09;

        hyphens: none;
        overflow-wrap: normal;
    }


    .solution-experience-intro .lead {
        font-size: 18px;
    }


    .solution-experience-intro > div:last-child > p:not(.lead) {
        font-size: 15px;
        line-height: 1.65;
    }


    .solution-experience-lines article {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;

        padding: 24px 0;
    }


    .solution-experience-lines article > span {
        padding: 0;

        font-size: 10px;
    }


    .solution-experience-lines h3 {
        margin-bottom: 8px;

        font-size: 23px;
        line-height: 1.14;

        hyphens: none;
        overflow-wrap: normal;
    }


    .solution-experience-lines p {
        font-size: 14px;
        line-height: 1.62;
    }

}

/* =========================================================
   E-COMMERCE – ERWEITERTE SEITENBEREICHE
   ========================================================= */


/* =========================================================
   GEMEINSAME ABSCHNITTSÜBERSCHRIFTEN
   ========================================================= */

.commerce-section-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.commerce-section-intro > * {
    min-width: 0;
}


.commerce-section-intro h2 {
    max-width: 790px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.commerce-section-intro .lead {
    max-width: 620px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.commerce-section-intro > div:last-child > p:not(.lead) {
    max-width: 630px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   SHOPIFY · SHOPWARE · INDIVIDUELL
   ========================================================= */

.commerce-platforms {
    position: relative;
    overflow: hidden;
}


.commerce-platforms::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -190px;

    width: 560px;
    height: 560px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.commerce-platforms .shell {
    position: relative;
    z-index: 1;
}


.commerce-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


.commerce-platform-grid article {
    min-width: 0;
    padding: 31px 28px 32px;

    border-top: 4px solid var(--ink);

    background: var(--paper);
}


.commerce-platform-grid article:nth-child(2) {
    background: var(--stone);
}


.commerce-platform-grid article:nth-child(3) {
    background: var(--ink);
    color: #fff;
}


.commerce-platform-grid article > span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.commerce-platform-label {
    margin: 25px 0 8px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.commerce-platform-grid article:nth-child(3) .commerce-platform-label {
    color: #efad90;
}


.commerce-platform-grid h3 {
    margin-bottom: 17px;

    font-size: clamp(26px, 2.2vw, 33px);
    line-height: 1.1;
}


.commerce-platform-grid article:nth-child(3) h3 {
    color: #fff;
}


.commerce-platform-grid article > p:not(.commerce-platform-label) {
    color: var(--muted);

    font-size: 14px;
    line-height: 1.68;
}


.commerce-platform-grid article:nth-child(3) > p:not(.commerce-platform-label) {
    color: rgba(255, 255, 255, 0.64);
}


.commerce-platform-grid ul {
    display: grid;
    gap: 9px;

    margin: 24px 0 0;
    padding: 20px 0 0;

    border-top: 1px solid var(--line);
    list-style: none;
}


.commerce-platform-grid article:nth-child(3) ul {
    border-color: rgba(255, 255, 255, 0.18);
}


.commerce-platform-grid li {
    position: relative;

    padding-left: 15px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


.commerce-platform-grid article:nth-child(3) li {
    color: rgba(255, 255, 255, 0.66);
}


.commerce-platform-grid li::before {
    content: "";

    position: absolute;
    top: 0.65em;
    left: 0;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: var(--copper);
}


/* =========================================================
   B2B-COMMERCE
   ========================================================= */

.commerce-b2b-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.commerce-b2b-grid > * {
    min-width: 0;
}


.commerce-b2b-grid h2 {
    max-width: 650px;

    color: #fff;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.commerce-b2b-lead {
    max-width: 620px;
    margin-top: 22px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 17px;
    line-height: 1.7;
}


.commerce-b2b-lines {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}


.commerce-b2b-lines article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 19px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}


.commerce-b2b-lines article > span {
    padding-top: 4px;

    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.commerce-b2b-lines h3 {
    margin-bottom: 8px;

    color: #fff;

    font-size: 22px;
    line-height: 1.18;
}


.commerce-b2b-lines p {
    max-width: 680px;
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   PRODUKTDATEN
   ========================================================= */

.commerce-data {
    position: relative;
    overflow: hidden;
}


.commerce-data-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}


.commerce-data-flow article {
    min-width: 0;
    padding: 28px 24px 29px;

    border-top: 3px solid var(--ink);

    background: var(--paper);
}


.commerce-data-flow span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.commerce-data-flow h3 {
    margin-top: 25px;
    margin-bottom: 11px;

    font-size: 23px;
    line-height: 1.14;
}


.commerce-data-flow p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   INTEGRATIONEN
   ========================================================= */

.commerce-integrations .split-statement {
    margin-bottom: 55px;
}


.commerce-integrations .split-statement h2 {
    color: var(--ink);
}


.commerce-integrations .split-statement > div:last-child p {
    color: var(--muted);
}


.commerce-integration-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.commerce-integration-map article {
    min-width: 0;
    min-height: 165px;

    padding: 25px 24px;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    background: rgba(255, 255, 255, 0.42);
}


.commerce-integration-map span {
    display: block;
    margin-bottom: 25px;

    color: var(--copper2);

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.commerce-integration-map p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.62;
}


/* =========================================================
   ENTWICKELTE COMMERCE-LÖSUNGEN
   ========================================================= */

.commerce-developed {
    position: relative;
    overflow: hidden;
}


.commerce-developed::before {
    content: "";
    position: absolute;
    bottom: -260px;
    right: -220px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.commerce-developed-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.commerce-developed-grid > * {
    min-width: 0;
}


.commerce-developed-grid h2 {
    max-width: 680px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.commerce-developed-grid .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 21px;
    line-height: 1.58;
}


.commerce-developed-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 640px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.commerce-developed-grid .button {
    margin-top: 12px;
}


.commerce-developed-list {
    border-top: 1px solid var(--line);
}


.commerce-developed-list article {
    display: grid;
    grid-template-columns:
        39px
        minmax(0, 1fr);
    gap: 19px;

    padding: 26px 0;

    border-bottom: 1px solid var(--line);
}


.commerce-developed-list article > span {
    padding-top: 5px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.commerce-developed-list h3 {
    margin-bottom: 8px;

    font-size: 25px;
    line-height: 1.14;
}


.commerce-developed-list p {
    max-width: 650px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .commerce-section-intro,
    .commerce-b2b-grid,
    .commerce-developed-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;
    }


    .commerce-platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .commerce-platform-grid article:last-child {
        grid-column: 1 / -1;
    }


    .commerce-data-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .commerce-integration-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .commerce-section-intro {
        margin-bottom: 37px;
    }


    .commerce-section-intro h2,
    .commerce-b2b-grid h2,
    .commerce-developed-grid h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        overflow-wrap: normal;
        hyphens: none;
    }


    .commerce-section-intro .lead {
        font-size: 18px;
    }


    .commerce-platform-grid,
    .commerce-data-flow,
    .commerce-integration-map {
        grid-template-columns: minmax(0, 1fr);
    }


    .commerce-platform-grid {
        gap: 13px;
    }


    .commerce-platform-grid article {
        padding: 25px 21px 27px;
    }


    .commerce-platform-grid article:last-child {
        grid-column: auto;
    }


    .commerce-platform-grid h3 {
        font-size: 27px;
    }


    .commerce-b2b-grid {
        gap: 35px;
    }


    .commerce-b2b-lead {
        font-size: 16px;
    }


    .commerce-b2b-lines article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .commerce-b2b-lines h3 {
        font-size: 21px;
    }


    .commerce-data-flow {
        gap: 12px;
    }


    .commerce-data-flow article {
        padding: 24px 21px;
    }


    .commerce-integration-map {
        border-left: 0;
    }


    .commerce-integration-map article {
        min-height: 0;
        padding: 22px 0;

        border-right: 0;
        background: transparent;
    }


    .commerce-integration-map span {
        margin-bottom: 12px;
    }


    .commerce-developed-grid .lead {
        font-size: 19px;
    }


    .commerce-developed-list article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 23px 0;
    }


    .commerce-developed-list h3 {
        font-size: 22px;
    }


    .commerce-developed-grid .button {
        width: 100%;
    }

}

/* =========================================================
   APPS, WEBANWENDUNGEN & ERP-ERWEITERUNGEN
   ========================================================= */


/* =========================================================
   GEMEINSAME EINLEITUNG
   ========================================================= */

.app-section-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.app-section-intro > * {
    min-width: 0;
}


.app-section-intro h2 {
    max-width: 780px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.app-section-intro .lead {
    max-width: 620px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.app-section-intro > div:last-child > p:not(.lead) {
    max-width: 630px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   ANWENDUNGSARTEN
   ========================================================= */

.app-types {
    position: relative;
    overflow: hidden;
}


.app-types::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.075);

    pointer-events: none;
}


.app-types .shell {
    position: relative;
    z-index: 1;
}


.app-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.app-type-grid article {
    min-width: 0;
    padding: 32px 30px;

    border-top: 4px solid var(--ink);

    background: #fff;
}


.app-type-grid article:nth-child(2),
.app-type-grid article:nth-child(3) {
    background: var(--stone);
}


.app-type-grid article:nth-child(4) {
    background: var(--ink);
    color: #fff;
}


.app-type-grid article > span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.app-type-label {
    margin: 25px 0 8px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.app-type-grid article:nth-child(4) .app-type-label {
    color: #efad90;
}


.app-type-grid h3 {
    margin-bottom: 16px;

    font-size: clamp(27px, 2.2vw, 34px);
    line-height: 1.1;
}


.app-type-grid article:nth-child(4) h3 {
    color: #fff;
}


.app-type-grid article > p:not(.app-type-label) {
    max-width: 600px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.68;
}


.app-type-grid article:nth-child(4) > p:not(.app-type-label) {
    color: rgba(255, 255, 255, 0.64);
}


.app-type-grid ul {
    display: grid;
    gap: 9px;

    margin: 24px 0 0;
    padding: 20px 0 0;

    border-top: 1px solid var(--line);

    list-style: none;
}


.app-type-grid article:nth-child(4) ul {
    border-color: rgba(255, 255, 255, 0.18);
}


.app-type-grid li {
    position: relative;

    padding-left: 15px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


.app-type-grid article:nth-child(4) li {
    color: rgba(255, 255, 255, 0.66);
}


.app-type-grid li::before {
    content: "";

    position: absolute;
    top: 0.65em;
    left: 0;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: var(--copper);
}


/* =========================================================
   ENTWICKLUNGSERFAHRUNG
   ========================================================= */

.app-experience {
    position: relative;
    overflow: hidden;
}


.app-experience-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.app-experience-header > * {
    min-width: 0;
}


.app-experience-header h2 {
    max-width: 800px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.app-experience-header .lead {
    max-width: 630px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.app-experience-header > div:last-child > p:not(.lead) {
    max-width: 630px;
    margin-bottom: 19px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.app-history-lines {
    border-top: 1px solid var(--line);
}


.app-history-lines article {
    display: grid;
    grid-template-columns:
        155px
        minmax(0, 1fr);
    gap: 45px;

    padding: 29px 0;

    border-bottom: 1px solid var(--line);
}


.app-history-lines article > span {
    padding-top: 5px;

    color: var(--copper2);

    font-size: 11px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.app-history-lines h3 {
    margin-bottom: 8px;

    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.14;
}


.app-history-lines p {
    max-width: 820px;
    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.65;
}


/* =========================================================
   EINSATZBEREICHE
   ========================================================= */

.app-use-cases-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.65fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: end;

    margin-bottom: 56px;
}


.app-use-cases-header > * {
    min-width: 0;
}


.app-use-cases-header h2 {
    max-width: 800px;
    margin: 0;

    color: #fff;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.app-use-cases-header > p {
    max-width: 520px;
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 16px;
    line-height: 1.7;
}


.app-use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px 24px;
}


.app-use-cases-grid article {
    min-width: 0;
    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.21);
}


.app-use-cases-grid span {
    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.app-use-cases-grid h3 {
    margin-top: 22px;
    margin-bottom: 11px;

    color: #fff;

    font-size: 24px;
    line-height: 1.16;
}


.app-use-cases-grid p {
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   TECHNISCHE FÄHIGKEITEN
   ========================================================= */

.app-capabilities {
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.app-capabilities > * {
    min-width: 0;
}


.app-capabilities > div:first-child h2 {
    max-width: 650px;

    font-size: clamp(35px, 3.2vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.app-capabilities > div:first-child .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.6;
}


/* =========================================================
   ERP-ERWEITERUNG ODER EIGENE APP
   ========================================================= */

.app-decision {
    position: relative;
    overflow: hidden;
}


.app-decision-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.app-decision-grid > * {
    min-width: 0;
}



.app-decision-grid h2 {
    max-width: 650px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.app-decision-grid .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.app-decision-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 620px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.app-decision-options {
    border-top: 1px solid var(--line);
}


.app-decision-options article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}


.app-decision-options article > span {
    padding-top: 4px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.app-decision-options h3 {
    margin-bottom: 8px;

    font-size: 23px;
    line-height: 1.16;
}


.app-decision-options p {
    max-width: 670px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   WECLAPP-BEREICH
   ========================================================= */

.app-weclapp .split-statement > div:last-child p {
    margin-bottom: 16px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .app-section-intro,
    .app-experience-header,
    .app-use-cases-header,
    .app-capabilities,
    .app-decision-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;
    }


    .app-use-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .app-section-intro,
    .app-experience-header,
    .app-use-cases-header {
        margin-bottom: 37px;
    }


    .app-section-intro h2,
    .app-experience-header h2,
    .app-use-cases-header h2,
    .app-capabilities > div:first-child h2,
    .app-decision-grid h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .app-section-intro .lead,
    .app-experience-header .lead {
        font-size: 18px;
    }


    .app-type-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }


    .app-type-grid article {
        padding: 25px 21px 27px;
    }


    .app-type-grid h3 {
        font-size: 27px;
    }


    .app-history-lines article {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;

        padding: 24px 0;
    }


    .app-history-lines article > span {
        padding: 0;

        font-size: 10px;
    }


    .app-history-lines h3 {
        font-size: 23px;

        hyphens: none;
        overflow-wrap: normal;
    }


    .app-history-lines p {
        font-size: 14px;
        line-height: 1.62;
    }


    .app-use-cases-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }


    .app-use-cases-grid h3 {
        margin-top: 18px;

        font-size: 22px;
    }


    .app-capabilities > div:first-child .lead,
    .app-decision-grid .lead {
        font-size: 18px;
    }


    .app-decision-options article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .app-decision-options h3 {
        font-size: 21px;
    }

}

/* =========================================================
   PROZESSAUTOMATION – ERWEITERTE SEITE
   ========================================================= */


/* =========================================================
   GEMEINSAME ABSCHNITTSÜBERSCHRIFT
   ========================================================= */

.automation-section-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.automation-section-intro > * {
    min-width: 0;
}


.automation-section-intro h2 {
    max-width: 800px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.automation-section-intro .lead {
    max-width: 630px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.automation-section-intro > div:last-child > p:not(.lead) {
    max-width: 630px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   AUTOMATIONSPOTENZIALE
   ========================================================= */

.automation-opportunities {
    position: relative;
    overflow: hidden;
}


.automation-opportunities::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.075);

    pointer-events: none;
}


.automation-opportunities .shell {
    position: relative;
    z-index: 1;
}


.automation-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


.automation-opportunity-grid article {
    min-width: 0;
    padding: 29px 25px 30px;

    border-top: 3px solid var(--ink);

    background: #fff;
}


.automation-opportunity-grid span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.automation-opportunity-grid h3 {
    margin-top: 25px;
    margin-bottom: 11px;

    font-size: 24px;
    line-height: 1.14;
}


.automation-opportunity-grid p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   KONKRETE BEISPIELE
   ========================================================= */

.automation-examples {
    position: relative;
    overflow: hidden;
}


.automation-example-list {
    border-top: 1px solid var(--line);
}


.automation-example-list article {
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr);
    gap: 45px;

    padding: 43px 0 46px;

    border-bottom: 1px solid var(--line);
}


.automation-example-list article > * {
    min-width: 0;
}


.automation-example-number {
    color: var(--copper);

    font-size: clamp(42px, 4vw, 62px);
    font-weight: 780;
    line-height: 0.9;
    letter-spacing: -0.06em;
}


.automation-example-content {
    max-width: 930px;
}


.automation-example-category {
    margin-bottom: 13px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.automation-example-content h3 {
    max-width: 850px;
    margin-bottom: 17px;

    font-size: clamp(28px, 2.6vw, 39px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}


.automation-example-content > p:not(.automation-example-category) {
    max-width: 810px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.automation-example-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--line);
}


.automation-example-tags span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}


.automation-example-tags span::before {
    content: "#";

    margin-right: 2px;

    color: var(--copper);
    font-weight: 850;
}


/* =========================================================
   BELASTBARE PROZESSKETTE
   ========================================================= */

.automation-architecture-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.65fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: end;

    margin-bottom: 56px;
}


.automation-architecture-header > * {
    min-width: 0;
}


.automation-architecture-header h2 {
    max-width: 820px;
    margin: 0;

    color: #fff;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.automation-architecture-header > p {
    max-width: 530px;
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 16px;
    line-height: 1.7;
}


.automation-architecture .automation-timeline {
    border-color: rgba(255, 255, 255, 0.2);
}


.automation-architecture .automation-timeline article {
    border-color: rgba(255, 255, 255, 0.17);
}


.automation-architecture .automation-timeline span {
    color: #efad90;
}


.automation-architecture .automation-timeline h3 {
    color: #fff;
}


.automation-architecture .automation-timeline p {
    color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   AUTOMATIONSSTUFEN
   ========================================================= */

.automation-levels {
    position: relative;
    overflow: hidden;
}


.automation-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


.automation-level-grid article {
    min-width: 0;
    padding: 31px 28px;

    border-top: 4px solid var(--ink);

    background: var(--paper);
}


.automation-level-grid article:nth-child(2) {
    background: var(--stone);
}


.automation-level-grid article:nth-child(3) {
    background: var(--ink);
    color: #fff;
}


.automation-level-grid article > span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.automation-level-label {
    margin: 25px 0 8px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.automation-level-grid article:nth-child(3) .automation-level-label {
    color: #efad90;
}


.automation-level-grid h3 {
    margin-bottom: 16px;

    font-size: clamp(26px, 2.15vw, 33px);
    line-height: 1.1;
}


.automation-level-grid article:nth-child(3) h3 {
    color: #fff;
}


.automation-level-grid article > p:not(.automation-level-label) {
    color: var(--muted);

    font-size: 14px;
    line-height: 1.68;
}


.automation-level-grid article:nth-child(3) > p:not(.automation-level-label) {
    color: rgba(255, 255, 255, 0.64);
}


.automation-level-grid ul {
    display: grid;
    gap: 9px;

    margin: 24px 0 0;
    padding: 20px 0 0;

    border-top: 1px solid var(--line);

    list-style: none;
}


.automation-level-grid article:nth-child(3) ul {
    border-color: rgba(255, 255, 255, 0.18);
}


.automation-level-grid li {
    position: relative;

    padding-left: 15px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


.automation-level-grid article:nth-child(3) li {
    color: rgba(255, 255, 255, 0.66);
}


.automation-level-grid li::before {
    content: "";

    position: absolute;
    top: 0.65em;
    left: 0;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: var(--copper);
}


/* =========================================================
   SYSTEMLANDSCHAFT
   ========================================================= */

.automation-systems-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.automation-systems-grid > * {
    min-width: 0;
}


.automation-systems-grid h2 {
    max-width: 660px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.automation-systems-grid .lead {
    max-width: 610px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.automation-systems-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 620px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.automation-system-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.automation-system-map article {
    min-width: 0;
    min-height: 155px;

    padding: 24px 22px;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    background: rgba(255, 255, 255, 0.4);
}


.automation-system-map span {
    display: block;
    margin-bottom: 22px;

    color: var(--copper2);

    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.automation-system-map p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.62;
}


/* =========================================================
   KI-BEREICH
   ========================================================= */

.automation-ai .split-statement > div:last-child p {
    margin-bottom: 16px;
}


/* =========================================================
   ENTWICKELTE AUTOMATIONSLÖSUNGEN
   ========================================================= */

.automation-developed {
    position: relative;
    overflow: hidden;
}


.automation-developed::before {
    content: "";
    position: absolute;
    bottom: -260px;
    right: -220px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.automation-developed-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.automation-developed-grid > * {
    min-width: 0;
}


.automation-developed-grid h2 {
    max-width: 680px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.automation-developed-grid .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.automation-developed-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 630px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.automation-developed-grid .button {
    margin-top: 12px;
}


.automation-developed-list {
    border-top: 1px solid var(--line);
}


.automation-developed-list article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}


.automation-developed-list article > span {
    padding-top: 4px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.automation-developed-list h3 {
    margin-bottom: 8px;

    font-size: 24px;
    line-height: 1.15;
}


.automation-developed-list p {
    max-width: 660px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .automation-section-intro,
    .automation-architecture-header,
    .automation-systems-grid,
    .automation-developed-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;
    }


    .automation-opportunity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .automation-level-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .automation-level-grid article:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .automation-section-intro,
    .automation-architecture-header {
        margin-bottom: 37px;
    }


    .automation-section-intro h2,
    .automation-architecture-header h2,
    .automation-systems-grid h2,
    .automation-developed-grid h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .automation-section-intro .lead {
        font-size: 18px;
    }


    .automation-opportunity-grid,
    .automation-level-grid,
    .automation-system-map {
        grid-template-columns: minmax(0, 1fr);
    }


    .automation-opportunity-grid {
        gap: 12px;
    }


    .automation-opportunity-grid article {
        padding: 24px 21px;
    }


    .automation-example-list article {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;

        padding: 32px 0 36px;
    }


    .automation-example-number {
        font-size: 42px;
    }


    .automation-example-content h3 {
        font-size: clamp(26px, 7.4vw, 33px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .automation-example-content > p:not(.automation-example-category) {
        font-size: 15px;
        line-height: 1.65;
    }


    .automation-example-tags {
        gap: 5px 9px;
    }


    .automation-example-tags span {
        font-size: 10px;
    }


    .automation-level-grid {
        gap: 13px;
    }


    .automation-level-grid article {
        padding: 25px 21px 27px;
    }


    .automation-level-grid article:last-child {
        grid-column: auto;
    }


    .automation-level-grid h3 {
        font-size: 27px;
    }


    .automation-systems-grid .lead,
    .automation-developed-grid .lead {
        font-size: 18px;
    }


    .automation-system-map {
        border-left: 0;
    }


    .automation-system-map article {
        min-height: 0;
        padding: 22px 0;

        border-right: 0;

        background: transparent;
    }


    .automation-system-map span {
        margin-bottom: 12px;
    }


    .automation-developed-list article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .automation-developed-list h3 {
        font-size: 21px;
    }


    .automation-developed-grid .button {
        width: 100%;
    }

}

/* =========================================================
   REFERENZEN – REDAKTIONELLE PROJEKTCHRONIK
   ========================================================= */


/* =========================================================
   EINLEITUNG
   ========================================================= */

.reference-overview {
    position: relative;
    overflow: hidden;
}


.reference-overview::before {
    content: "";
    position: absolute;
    top: -240px;
    right: -190px;

    width: 540px;
    height: 540px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.reference-overview .shell {
    position: relative;
    z-index: 1;
}


.reference-page-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;
}


.reference-page-intro > * {
    min-width: 0;
}


.reference-page-intro h2 {
    max-width: 800px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.reference-page-intro .lead {
    max-width: 620px;
    margin-bottom: 17px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.reference-page-intro > div:last-child > p:not(.lead) {
    max-width: 630px;
    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   GRUNDBEREICH DER CHRONIK
   ========================================================= */

.reference-chronicle {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(184, 101, 66, 0.18),
            transparent 25%
        ),
        #071f22;

    color: #fff;
}


.reference-chronicle::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, 0.7),
            transparent
        );
}


.reference-chronicle .shell {
    position: relative;
    z-index: 1;
}


/* =========================================================
   CHRONIK-ÜBERSCHRIFT
   ========================================================= */

.reference-chronicle-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(300px, 0.7fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 72px;
}


.reference-chronicle-header > * {
    min-width: 0;
}


.reference-chronicle-header h2 {
    max-width: 850px;
    margin: 0;

    color: #fff;

    font-size: clamp(37px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.reference-chronicle-header > p {
    max-width: 520px;
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   TIMELINE-GRUNDSTRUKTUR
   ========================================================= */

.reference-timeline {
    position: relative;
}


.reference-timeline::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 160px;
    left: 209px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(229, 154, 121, 0.85),
            rgba(229, 154, 121, 0.18)
        );

    pointer-events: none;
}


/* =========================================================
   EINZELNER MEILENSTEIN
   ========================================================= */

.reference-milestone {
    position: relative;

    display: grid;
    grid-template-columns:
        175px
        minmax(0, 1fr);
    gap: 70px;

    padding: 65px 0 72px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

    scroll-margin-top: 110px;
}


.reference-milestone > * {
    min-width: 0;
}


/* Punkt auf der Zeitachse */

.reference-milestone::before {
    content: "";
    position: absolute;
    top: 70px;
    left: 202px;

    width: 13px;
    height: 13px;

    border: 4px solid #071f22;
    border-radius: 50%;

    background: #e59a79;

    box-shadow:
        0 0 0 1px rgba(229, 154, 121, 0.5),
        0 0 28px rgba(229, 154, 121, 0.28);
}


/* Linke Zeitangabe */

.reference-milestone-rail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.reference-milestone-index {
    margin-bottom: 34px;

    color: #efad90;

    font-size: clamp(58px, 6.2vw, 92px);
    font-weight: 760;
    line-height: 0.82;
    letter-spacing: -0.07em;
}


.reference-milestone-rail strong {
    margin-bottom: 8px;

    color: #fff;

    font-size: 18px;
    line-height: 1.25;
}


.reference-milestone-rail small {
    max-width: 150px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   PROJEKTINHALT
   ========================================================= */

.reference-milestone-main {
    max-width: 980px;
}


.reference-milestone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 17px;

    margin-bottom: 25px;
}


.reference-milestone-meta span {
    position: relative;

    color: #efad90;

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.reference-milestone-meta span:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -10px;

    width: 3px;
    height: 3px;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transform: translateY(-50%);
}


.reference-milestone-main > h2 {
    max-width: 930px;
    margin-bottom: 24px;

    color: #fff;

    font-size: clamp(35px, 3.25vw, 49px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.reference-milestone-lead {
    max-width: 850px;
    margin-bottom: 39px;

    color: rgba(255, 255, 255, 0.75);

    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.65;
}


/* =========================================================
   AUFGABE · ENTWICKLUNG · BESONDERHEIT
   ========================================================= */

.reference-milestone-story {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;

    margin-bottom: 35px;
}


.reference-milestone-story > div {
    min-width: 0;
    padding-top: 21px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.reference-milestone-story span {
    display: block;

    margin-bottom: 16px;

    color: #efad90;

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.reference-milestone-story p {
    margin: 0;

    color: rgba(255, 255, 255, 0.59);

    font-size: 14px;
    line-height: 1.68;
}


/* =========================================================
   PROJEKTFUSS
   ========================================================= */

.reference-milestone-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        170px;
    gap: 45px;
    align-items: end;

    padding-top: 27px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.reference-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
}


.reference-tech-tags span {
    color: rgba(255, 255, 255, 0.58);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}


.reference-tech-tags span::before {
    content: "#";

    margin-right: 2px;

    color: #df8d66;
    font-weight: 850;
}


.reference-milestone-impact {
    display: grid;
    justify-items: end;

    text-align: right;
}


.reference-milestone-impact strong {
    color: #fff;

    font-size: 33px;
    line-height: 1;
    letter-spacing: -0.045em;
}


.reference-milestone-impact span {
    max-width: 170px;
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 10px;
    line-height: 1.45;
}


/* =========================================================
   HERVORGEHOBENES ERSTES PROJEKT
   ========================================================= */

.reference-milestone-featured {
    margin-inline: -38px;
    padding-inline: 38px;

    border-top: 4px solid #e59a79;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.012)
        );
}

/* Punkt hervorgehobener Timeline-Einträge auf der Hauptlinie halten */
.reference-milestone-featured::before {
    left: 240px;
}


.reference-milestone-featured::after {
    content: "";
    position: absolute;
    top: 10%;
    right: -120px;

    width: 360px;
    height: 360px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.09);
    filter: blur(5px);

    pointer-events: none;
}


.reference-milestone-featured > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   AKTUELLES PROJEKT
   ========================================================= */

.reference-milestone-current {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}


.reference-milestone-current::before {
    background: #fff;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 0 32px rgba(229, 154, 121, 0.45);
}


/* =========================================================
   FORTSETZUNG DER TIMELINE
   ========================================================= */

.reference-timeline-continuation {
    display: grid;
    grid-template-columns:
        175px
        minmax(0, 1fr);
    gap: 70px;

    padding-top: 65px;
}


.reference-timeline-continuation-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;

    width: 100%;
    padding-left: 34px;
}


.reference-timeline-continuation-marker span {
    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #e59a79;
}


.reference-timeline-continuation > div:last-child {
    max-width: 900px;
}


.reference-timeline-continuation h2 {
    max-width: 880px;
    margin-bottom: 21px;

    color: #fff;

    font-size: clamp(33px, 3vw, 45px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.reference-timeline-continuation p:not(.eyebrow) {
    max-width: 760px;
    margin-bottom: 27px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================================
   GEMEINSAME PRINZIPIEN
   ========================================================= */

.reference-principles {
    position: relative;
    overflow: hidden;
}


.reference-principles::before {
    content: "";
    position: absolute;
    bottom: -250px;
    right: -200px;

    width: 560px;
    height: 560px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.reference-principles .shell {
    position: relative;
    z-index: 1;
}


.reference-principles-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.7fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: end;

    margin-bottom: 57px;
}


.reference-principles-header > * {
    min-width: 0;
}


.reference-principles-header h2 {
    max-width: 790px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.reference-principles-header > p {
    max-width: 530px;
    margin: 0;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.7;
}


.reference-principles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


.reference-principles-grid article {
    min-width: 0;
    padding-top: 23px;

    border-top: 1px solid var(--line);
}


.reference-principles-grid span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.reference-principles-grid h3 {
    margin-top: 23px;
    margin-bottom: 11px;

    font-size: 24px;
    line-height: 1.15;
}


.reference-principles-grid p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   MITTLERE DESKTOPS UND TABLETS
   ========================================================= */

@media (max-width: 1100px) {

    .reference-timeline::before {
        left: 165px;
    }


    .reference-milestone {
        grid-template-columns:
            135px
            minmax(0, 1fr);
        gap: 60px;
    }


    .reference-milestone::before {
        left: 158px;
    }


    .reference-timeline-continuation {
        grid-template-columns:
            135px
            minmax(0, 1fr);
        gap: 60px;
    }


    .reference-milestone-story {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .reference-milestone-story > div:last-child {
        grid-column: 1 / -1;
    }


    .reference-principles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 820px) {

    .reference-page-intro,
    .reference-chronicle-header,
    .reference-principles-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px;
    }


    .reference-chronicle-header {
        margin-bottom: 52px;
    }


    .reference-timeline::before {
        left: 13px;
        bottom: 145px;
    }


    .reference-milestone {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;

        padding:
            50px
            0
            57px
            46px;
    }


    .reference-milestone::before {
        top: 55px;
        left: 6px;
    }


    .reference-milestone-rail {
        display: grid;
        grid-template-columns:
            auto
            minmax(0, 1fr);
        gap: 8px 18px;
        align-items: end;
    }


    .reference-milestone-index {
        grid-row: 1 / span 2;

        margin: 0;

        font-size: 58px;
    }


    .reference-milestone-rail strong {
        margin: 0;

        font-size: 17px;
    }


    .reference-milestone-rail small {
        max-width: none;
    }


    .reference-milestone-featured {
        margin-inline: -20px;
        padding-right: 20px;
        padding-left: 66px;
    }


    .reference-milestone-featured::before {
        left: 26px;
    }


    .reference-timeline-continuation {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;

        padding:
            54px
            0
            0
            46px;
    }


    .reference-timeline-continuation-marker {
        flex-direction: row;
        align-items: center;
        gap: 10px;

        width: auto;
        padding: 0;
    }

}


/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width: 680px) {

    .reference-chronicle {
        padding: 68px 0 72px;
    }


    .reference-page-intro h2,
    .reference-chronicle-header h2,
    .reference-principles-header h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        hyphens: none;

        overflow-wrap: normal;
    }


    .reference-page-intro .lead {
        font-size: 18px;
    }


    .reference-chronicle-header {
        margin-bottom: 38px;
    }


    .reference-chronicle-header > p,
    .reference-principles-header > p {
        font-size: 15px;
        line-height: 1.65;
    }


    .reference-milestone {
        gap: 25px;

        padding:
            40px
            0
            45px
            34px;
    }


    .reference-timeline::before {
        left: 8px;
    }


    .reference-milestone::before {
        top: 45px;
        left: 1px;

        width: 11px;
        height: 11px;

        border-width: 3px;
    }


    .reference-milestone-rail {
        grid-template-columns:
            54px
            minmax(0, 1fr);
        gap: 5px 12px;
    }


    .reference-milestone-index {
        font-size: 48px;
    }


    .reference-milestone-rail strong {
        font-size: 16px;
    }


    .reference-milestone-rail small {
        font-size: 10px;
    }


    .reference-milestone-main > h2 {
        margin-bottom: 19px;

        font-size: clamp(28px, 7.8vw, 36px);
        line-height: 1.09;

        hyphens: none;
        overflow-wrap: normal;
    }


    .reference-milestone-meta {
        gap: 5px 13px;
        margin-bottom: 18px;
    }


    .reference-milestone-meta span {
        font-size: 9px;
    }


    .reference-milestone-lead {
        margin-bottom: 29px;

        font-size: 17px;
        line-height: 1.6;
    }


    .reference-milestone-story {
        grid-template-columns: minmax(0, 1fr);
        gap: 23px;

        margin-bottom: 29px;
    }


    .reference-milestone-story > div:last-child {
        grid-column: auto;
    }


    .reference-milestone-story p {
        font-size: 14px;
        line-height: 1.65;
    }


    .reference-milestone-footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }


    .reference-milestone-impact {
        justify-items: start;

        text-align: left;
    }


    .reference-milestone-impact strong {
        font-size: 29px;
    }


    .reference-milestone-impact span {
        max-width: 260px;
    }


    .reference-milestone-featured {
        margin-inline: -20px;

        padding-right: 20px;
        padding-left: 54px;
    }


    .reference-milestone-featured::before {
        left: 21px;
    }


    .reference-timeline-continuation {
        padding:
            45px
            0
            0
            34px;
    }


    .reference-timeline-continuation h2 {
        font-size: clamp(28px, 7.8vw, 36px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .reference-timeline-continuation p:not(.eyebrow) {
        font-size: 15px;
        line-height: 1.65;
    }


    .reference-timeline-continuation .button {
        width: 100%;
    }


    .reference-principles-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }


    .reference-principles-grid h3 {
        margin-top: 18px;

        font-size: 22px;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .reference-milestone {
        padding-left: 30px;
    }


    .reference-timeline::before {
        left: 6px;
    }


    .reference-milestone::before {
        left: -1px;
    }


    .reference-milestone-featured {
        padding-left: 50px;
    }


    .reference-milestone-featured::before {
        left: 19px;
    }


    .reference-milestone-rail {
        grid-template-columns:
            47px
            minmax(0, 1fr);
    }


    .reference-milestone-index {
        font-size: 43px;
    }


    .reference-timeline-continuation {
        padding-left: 30px;
    }

}

/* =========================================================
   REFERENZEN – ZUSÄTZLICHE TIMELINE-VARIANTEN
   ========================================================= */


/* ---------------------------------------------------------
   Kompakter historischer Meilenstein
   --------------------------------------------------------- */

.reference-milestone-compact {
    padding-top: 54px;
    padding-bottom: 58px;
}


.reference-milestone-compact .reference-milestone-main {
    max-width: 900px;
}


.reference-milestone-compact .reference-milestone-lead {
    margin-bottom: 25px;
}


.reference-milestone-summary {
    max-width: 820px;

    margin-bottom: 25px;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.reference-milestone-summary p {
    margin: 0;

    color: rgba(255, 255, 255, 0.59);

    font-size: 15px;
    line-height: 1.7;
}


.reference-milestone-compact .reference-tech-tags {
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


/* ---------------------------------------------------------
   Offener Sammelpunkt
   --------------------------------------------------------- */

.reference-milestone-open {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}


.reference-milestone-open .reference-milestone-index {
    color: #fff;

    font-size: clamp(54px, 5.5vw, 82px);
}


.reference-milestone-open::before {
    background: transparent;

    border-color: #e59a79;

    box-shadow:
        0 0 0 1px rgba(229, 154, 121, 0.45),
        0 0 24px rgba(229, 154, 121, 0.2);
}


/* ---------------------------------------------------------
   Unterschiedliche Flächen für mehr Rhythmus
   --------------------------------------------------------- */

.reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured) {
    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.025),
            transparent 55%
        );
}


.reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured) {
    margin-inline: -24px;
    padding-inline: 24px;
}


/* ---------------------------------------------------------
   Große Nummern etwas ruhiger halten
   --------------------------------------------------------- */

.reference-milestone-index {
    text-wrap: nowrap;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {

    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured) {
        margin-inline: -20px;

        padding-right: 20px;
        padding-left: 66px;
    }


    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured)::before {
        left: 26px;
    }


    .reference-milestone-summary {
        margin-bottom: 22px;
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 680px) {

    .reference-milestone-compact {
        padding-top: 38px;
        padding-bottom: 42px;
    }


    .reference-milestone-summary {
        padding-top: 18px;
    }


    .reference-milestone-summary p {
        font-size: 14px;
        line-height: 1.65;
    }


    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured) {
        margin-inline: -20px;

        padding-right: 20px;
        padding-left: 54px;
    }


    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured)::before {
        left: 21px;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured) {
        padding-left: 50px;
    }


    .reference-milestone:nth-of-type(3n + 2):not(.reference-milestone-featured)::before {
        left: 19px;
    }

}

/* =========================================================
   SCHNITTSTELLEN & DATENSYNCHRONISIERUNG
   ========================================================= */


/* =========================================================
   GEMEINSAME ABSCHNITTSÜBERSCHRIFTEN
   ========================================================= */

.interface-section-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.interface-section-intro > * {
    min-width: 0;
}


.interface-section-intro h2 {
    max-width: 810px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.interface-section-intro .lead {
    max-width: 630px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.interface-section-intro > div:last-child > p:not(.lead) {
    max-width: 640px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   GRUNDLAGEN
   ========================================================= */

.interface-foundation {
    position: relative;
    overflow: hidden;
}


.interface-foundation::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.075);

    pointer-events: none;
}


.interface-foundation .shell {
    position: relative;
    z-index: 1;
}


.interface-foundation .interface-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   SYSTEMLANDSCHAFT
   ========================================================= */

.interface-landscape {
    position: relative;
    overflow: hidden;
}


.interface-landscape-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}


.interface-landscape-grid article {
    min-width: 0;
    min-height: 235px;

    padding: 27px 24px;

    border-top: 3px solid var(--ink);

    background: var(--paper);
}


.interface-landscape-grid .interface-landscape-primary {
    grid-column: span 2;

    background: var(--ink);
    color: #fff;
}


.interface-landscape-grid article > span {
    display: block;
    margin-bottom: 34px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.interface-landscape-grid .interface-landscape-primary > span {
    color: #efad90;
}


.interface-landscape-grid h3 {
    margin-bottom: 12px;

    font-size: 23px;
    line-height: 1.14;
}


.interface-landscape-grid .interface-landscape-primary h3 {
    max-width: 600px;

    color: #fff;

    font-size: clamp(27px, 2.2vw, 34px);
}


.interface-landscape-grid p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


.interface-landscape-grid .interface-landscape-primary p {
    max-width: 650px;

    color: rgba(255, 255, 255, 0.64);
}


/* =========================================================
   DATENFLUSS
   ========================================================= */

.interface-dataflow-header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, 0.65fr);
    gap: clamp(55px, 7vw, 100px);
    align-items: end;

    margin-bottom: 58px;
}


.interface-dataflow-header > * {
    min-width: 0;
}


.interface-dataflow-header h2 {
    max-width: 820px;
    margin: 0;

    color: #fff;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.interface-dataflow-header > p {
    max-width: 530px;
    margin: 0;

    color: rgba(255, 255, 255, 0.64);

    font-size: 16px;
    line-height: 1.7;
}


.interface-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}


.interface-flow article {
    position: relative;

    min-width: 0;
    min-height: 230px;

    padding: 24px 19px;

    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


.interface-flow article:not(:last-child)::after {
    content: "→";

    position: absolute;
    z-index: 2;
    top: 50%;
    right: -12px;

    display: grid;
    place-items: center;

    width: 23px;
    height: 23px;
    border-radius: 50%;

    background: #071f22;
    color: #efad90;

    font-size: 13px;

    transform: translateY(-50%);
}


.interface-flow article > span {
    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.interface-flow article > div {
    display: grid;
    align-content: end;

    min-height: 155px;
}


.interface-flow p {
    margin-bottom: 9px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.interface-flow h3 {
    margin: 0;

    color: #fff;

    font-size: 19px;
    line-height: 1.2;
}


.interface-flow-note {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.55fr)
        minmax(0, 1.45fr);
    gap: 50px;

    margin-top: 38px;
    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.interface-flow-note strong {
    color: #fff;

    font-size: 18px;
    line-height: 1.45;
}


.interface-flow-note p {
    max-width: 780px;
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   SCHNITTSTELLENSZENARIEN
   ========================================================= */

.interface-scenarios {
    position: relative;
    overflow: hidden;
}


.interface-scenario-list {
    border-top: 1px solid var(--line);
}


.interface-scenario-list article {
    display: grid;
    grid-template-columns:
        85px
        minmax(0, 1fr);
    gap: 45px;

    padding: 42px 0 45px;

    border-bottom: 1px solid var(--line);
}


.interface-scenario-list article > * {
    min-width: 0;
}


.interface-scenario-number {
    color: var(--copper);

    font-size: clamp(40px, 3.8vw, 59px);
    font-weight: 780;
    line-height: 0.9;
    letter-spacing: -0.06em;
}


.interface-scenario-main {
    max-width: 930px;
}


.interface-scenario-category {
    margin-bottom: 13px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.interface-scenario-main h3 {
    max-width: 850px;
    margin-bottom: 16px;

    font-size: clamp(28px, 2.55vw, 39px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}


.interface-scenario-main > p:not(.interface-scenario-category) {
    max-width: 800px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.interface-scenario-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--line);
}


.interface-scenario-tags span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}


.interface-scenario-tags span::before {
    content: "#";

    margin-right: 2px;

    color: var(--copper);
    font-weight: 850;
}


/* =========================================================
   ENGINEERING
   ========================================================= */

.interface-engineering {
    position: relative;
    overflow: hidden;
}


.interface-engineering-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.interface-engineering-grid > * {
    min-width: 0;
}


.interface-engineering-grid h2 {
    max-width: 650px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.interface-engineering-grid .lead {
    max-width: 610px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.interface-engineering-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 620px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.interface-engineering-list {
    border-top: 1px solid var(--line);
}


.interface-engineering-list article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 18px;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}


.interface-engineering-list article > span {
    padding-top: 4px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.interface-engineering-list h3 {
    margin-bottom: 8px;

    font-size: 22px;
    line-height: 1.16;
}


.interface-engineering-list p {
    max-width: 680px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   REFERENZBEREICH
   ========================================================= */

.interface-reference .split-statement > div:last-child p {
    margin-bottom: 16px;
}


/* =========================================================
   PROJEKTREFERENZEN
   ========================================================= */

.interface-project-references {
    position: relative;
    overflow: hidden;
}


.interface-project-references::before {
    content: "";
    position: absolute;
    bottom: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.interface-project-references .shell {
    position: relative;
    z-index: 1;
}


.interface-reference-lines {
    border-top: 1px solid var(--line);
}


.interface-reference-lines a {
    display: grid;
    grid-template-columns:
        45px
        minmax(0, 1fr)
        28px;
    gap: 25px;
    align-items: center;

    padding: 28px 0;

    border-bottom: 1px solid var(--line);

    transition:
        padding-left 0.2s ease,
        color 0.2s ease;
}


.interface-reference-lines a:hover {
    padding-left: 8px;
}


.interface-reference-lines a > span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.interface-reference-lines p {
    margin-bottom: 6px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.interface-reference-lines h3 {
    max-width: 850px;
    margin: 0;

    font-size: clamp(23px, 2vw, 29px);
    line-height: 1.14;
}


.interface-reference-lines i {
    color: var(--copper);

    font-size: 20px;
    font-style: normal;
}


/* =========================================================
   ENTWICKELTE INTEGRATIONSLÖSUNGEN
   ========================================================= */

.interface-developed-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.interface-developed-grid > * {
    min-width: 0;
}


.interface-developed-grid h2 {
    max-width: 680px;

    color: #fff;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.interface-developed-grid .lead {
    max-width: 620px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 20px;
    line-height: 1.58;
}


.interface-developed-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 630px;

    color: rgba(255, 255, 255, 0.61);

    font-size: 15px;
    line-height: 1.7;
}


.interface-developed-grid .button {
    margin-top: 12px;
}


.interface-developed-list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}


.interface-developed-list article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}


.interface-developed-list article > span {
    padding-top: 4px;

    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.interface-developed-list h3 {
    margin-bottom: 8px;

    color: #fff;

    font-size: 23px;
    line-height: 1.15;
}


.interface-developed-list p {
    max-width: 660px;
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   MITTLERE DESKTOPS
   ========================================================= */

@media (max-width: 1100px) {

    .interface-landscape-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .interface-landscape-grid .interface-landscape-primary {
        grid-column: span 2;
    }


    .interface-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .interface-flow article:nth-child(3)::after {
        display: none;
    }

}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    .interface-section-intro,
    .interface-dataflow-header,
    .interface-engineering-grid,
    .interface-developed-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }


    .interface-foundation .interface-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .interface-landscape-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .interface-landscape-grid .interface-landscape-primary {
        grid-column: 1 / -1;
    }


    .interface-flow-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

}


/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width: 680px) {

    .interface-section-intro,
    .interface-dataflow-header {
        margin-bottom: 37px;
    }


    .interface-section-intro h2,
    .interface-dataflow-header h2,
    .interface-engineering-grid h2,
    .interface-developed-grid h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        overflow-wrap: normal;
        hyphens: none;
    }


    .interface-section-intro .lead {
        font-size: 18px;
    }


    .interface-foundation .interface-stack,
    .interface-landscape-grid,
    .interface-flow {
        grid-template-columns: minmax(0, 1fr);
    }


    .interface-landscape-grid {
        gap: 12px;
    }


    .interface-landscape-grid .interface-landscape-primary {
        grid-column: auto;
    }


    .interface-landscape-grid article {
        min-height: 0;
        padding: 24px 21px;
    }


    .interface-landscape-grid article > span {
        margin-bottom: 24px;
    }


    .interface-flow {
        border-left: 0;
    }


    .interface-flow article {
        min-height: 0;

        padding: 22px 0;

        border-right: 0;
    }


    .interface-flow article:not(:last-child)::after {
        content: "↓";

        top: auto;
        right: auto;
        bottom: -12px;
        left: 0;

        transform: none;
    }


    .interface-flow article:nth-child(3)::after {
        display: grid;
    }


    .interface-flow article > div {
        min-height: 0;
        margin-top: 20px;
    }


    .interface-flow h3 {
        font-size: 21px;
    }


    .interface-flow-note {
        margin-top: 31px;
        padding-top: 24px;
    }


    .interface-scenario-list article {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;

        padding: 32px 0 36px;
    }


    .interface-scenario-number {
        font-size: 42px;
    }


    .interface-scenario-main h3 {
        font-size: clamp(26px, 7.4vw, 33px);
        line-height: 1.1;

        overflow-wrap: normal;
        hyphens: none;
    }


    .interface-scenario-main > p:not(.interface-scenario-category) {
        font-size: 15px;
        line-height: 1.65;
    }


    .interface-scenario-tags {
        gap: 5px 9px;
    }


    .interface-scenario-tags span {
        font-size: 10px;
    }


    .interface-engineering-grid .lead,
    .interface-developed-grid .lead {
        font-size: 18px;
    }


    .interface-engineering-list article,
    .interface-developed-list article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .interface-engineering-list h3,
    .interface-developed-list h3 {
        font-size: 21px;
    }


    .interface-reference-lines a {
        grid-template-columns:
            29px
            minmax(0, 1fr)
            20px;
        gap: 11px;

        padding: 23px 0;
    }


    .interface-reference-lines h3 {
        font-size: 21px;

        overflow-wrap: normal;
        hyphens: none;
    }


    .interface-developed-grid .button {
        width: 100%;
    }

}

/* =========================================================
   INDIVIDUELLE UNTERNEHMENSSOFTWARE
   ========================================================= */


/* =========================================================
   GEMEINSAME ABSCHNITTSÜBERSCHRIFTEN
   ========================================================= */

.software-section-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.75fr);
    gap: clamp(55px, 7vw, 105px);
    align-items: end;

    margin-bottom: 58px;
}


.software-section-intro > * {
    min-width: 0;
}


.software-section-intro h2 {
    max-width: 810px;
    margin: 0;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.software-section-intro .lead {
    max-width: 630px;
    margin-bottom: 16px;

    color: var(--ink);

    font-size: clamp(19px, 1.4vw, 22px);
    line-height: 1.58;
}


.software-section-intro > div:last-child > p:not(.lead) {
    max-width: 640px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   EIGNUNG
   ========================================================= */

.software-suitability {
    position: relative;
    overflow: hidden;
}


.software-suitability::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.075);

    pointer-events: none;
}


.software-suitability .shell {
    position: relative;
    z-index: 1;
}


.software-suitability .suitability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   ERP-FUNDAMENT UND FACHANWENDUNG
   ========================================================= */

.software-foundation {
    position: relative;
    overflow: hidden;
}


.software-foundation-model {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


.software-foundation-model article {
    min-width: 0;
    padding: 31px 28px 32px;

    border-top: 4px solid var(--ink);

    background: var(--paper);
}


.software-foundation-model .software-foundation-bridge {
    background: var(--stone);
}


.software-foundation-model .software-foundation-custom {
    background: var(--ink);
    color: #fff;
}


.software-foundation-model article > span {
    display: block;

    margin-bottom: 27px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.software-foundation-model .software-foundation-custom > span {
    color: #efad90;
}


.software-foundation-model h3 {
    margin-bottom: 17px;

    font-size: clamp(26px, 2.15vw, 33px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}


.software-foundation-model .software-foundation-custom h3 {
    color: #fff;
}


.software-foundation-model article > p {
    color: var(--muted);

    font-size: 14px;
    line-height: 1.68;
}


.software-foundation-model .software-foundation-custom > p {
    color: rgba(255, 255, 255, 0.64);
}


.software-foundation-model ul {
    display: grid;
    gap: 9px;

    margin: 24px 0 0;
    padding: 20px 0 0;

    border-top: 1px solid var(--line);
    list-style: none;
}


.software-foundation-model .software-foundation-custom ul {
    border-color: rgba(255, 255, 255, 0.18);
}


.software-foundation-model li {
    position: relative;

    padding-left: 15px;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.5;
}


.software-foundation-model .software-foundation-custom li {
    color: rgba(255, 255, 255, 0.66);
}


.software-foundation-model li::before {
    content: "";

    position: absolute;
    top: 0.65em;
    left: 0;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: var(--copper);
}


/* =========================================================
   WECLAPP
   ========================================================= */

.software-weclapp-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.software-weclapp-grid > * {
    min-width: 0;
}


.software-weclapp-intro h2 {
    max-width: 680px;

    color: #fff;

    font-size: clamp(35px, 3.3vw, 49px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.software-weclapp-lead {
    max-width: 640px;
    margin-top: 23px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 17px;
    line-height: 1.7;
}


.software-weclapp-lines {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}


.software-weclapp-lines article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 19px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}


.software-weclapp-lines article > span {
    padding-top: 4px;

    color: #efad90;

    font-size: 11px;
    font-weight: 850;
}


.software-weclapp-lines h3 {
    margin-bottom: 8px;

    color: #fff;

    font-size: 22px;
    line-height: 1.18;
}


.software-weclapp-lines p {
    max-width: 680px;
    margin: 0;

    color: rgba(255, 255, 255, 0.61);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   FACHANWENDUNGEN
   ========================================================= */

.software-use-cases {
    position: relative;
    overflow: hidden;
}


.software-use-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


.software-use-case-grid article {
    min-width: 0;
    padding: 28px 25px 30px;

    border-top: 3px solid var(--ink);

    background: var(--paper);
}


.software-use-case-grid span {
    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.software-use-case-label {
    margin: 24px 0 8px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.software-use-case-grid h3 {
    margin-bottom: 12px;

    font-size: 24px;
    line-height: 1.14;
}


.software-use-case-grid article > p:not(.software-use-case-label) {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ENTSCHEIDUNGSMODELL
   ========================================================= */

.software-decision {
    position: relative;
    overflow: hidden;
}


.software-decision-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.software-decision-grid > * {
    min-width: 0;
}


.software-decision-grid h2 {
    max-width: 670px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.software-decision-grid .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.software-decision-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 630px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.software-decision-options {
    border-top: 1px solid var(--line);
}


.software-decision-options article {
    display: grid;
    grid-template-columns:
        39px
        minmax(0, 1fr);
    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}


.software-decision-options article > span {
    padding-top: 5px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.software-decision-options p {
    margin-bottom: 5px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.software-decision-options h3 {
    margin-bottom: 8px;

    font-size: 23px;
    line-height: 1.15;
}


.software-decision-options small {
    display: block;
    max-width: 680px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   ENTWICKELTE LÖSUNGEN
   ========================================================= */

.software-developed {
    position: relative;
    overflow: hidden;
}


.software-developed::before {
    content: "";
    position: absolute;
    bottom: -260px;
    right: -220px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.software-developed-grid {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);
    gap: clamp(60px, 8vw, 115px);
    align-items: start;
}


.software-developed-grid > * {
    min-width: 0;
}


.software-developed-grid h2 {
    max-width: 690px;

    font-size: clamp(35px, 3.25vw, 48px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.software-developed-grid .lead {
    max-width: 620px;

    color: var(--ink);

    font-size: 20px;
    line-height: 1.58;
}


.software-developed-grid > div:first-child > p:not(.eyebrow):not(.lead) {
    max-width: 630px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


.software-developed-grid .button {
    margin-top: 12px;
}


.software-developed-list {
    border-top: 1px solid var(--line);
}


.software-developed-list article {
    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    gap: 18px;

    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}


.software-developed-list article > span {
    padding-top: 4px;

    color: var(--copper);

    font-size: 11px;
    font-weight: 850;
}


.software-developed-list h3 {
    margin-bottom: 8px;

    font-size: 23px;
    line-height: 1.15;
}


.software-developed-list p {
    max-width: 660px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 1000px) {

    .software-section-intro,
    .software-weclapp-grid,
    .software-decision-grid,
    .software-developed-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;
    }


    .software-suitability .suitability-grid,
    .software-use-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .software-foundation-model {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .software-foundation-model .software-foundation-custom {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width: 680px) {

    .software-section-intro {
        margin-bottom: 37px;
    }


    .software-section-intro h2,
    .software-weclapp-intro h2,
    .software-decision-grid h2,
    .software-developed-grid h2 {
        font-size: clamp(29px, 8.2vw, 37px);
        line-height: 1.1;

        hyphens: none;
        overflow-wrap: normal;
    }


    .software-section-intro .lead {
        font-size: 18px;
    }


    .software-suitability .suitability-grid,
    .software-foundation-model,
    .software-use-case-grid {
        grid-template-columns: minmax(0, 1fr);
    }


    .software-foundation-model {
        gap: 13px;
    }


    .software-foundation-model article {
        padding: 25px 21px 27px;
    }


    .software-foundation-model .software-foundation-custom {
        grid-column: auto;
    }


    .software-foundation-model h3 {
        font-size: 27px;
    }


    .software-weclapp-grid {
        gap: 35px;
    }


    .software-weclapp-lead {
        font-size: 16px;
    }


    .software-weclapp-lines article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .software-weclapp-lines h3 {
        font-size: 21px;
    }


    .software-use-case-grid {
        gap: 12px;
    }


    .software-use-case-grid article {
        padding: 24px 21px;
    }


    .software-decision-grid .lead,
    .software-developed-grid .lead {
        font-size: 18px;
    }


    .software-decision-options article,
    .software-developed-list article {
        grid-template-columns:
            29px
            minmax(0, 1fr);
        gap: 11px;

        padding: 22px 0;
    }


    .software-decision-options h3,
    .software-developed-list h3 {
        font-size: 21px;
    }


    .software-developed-grid .button {
        width: 100%;
    }

}

/* =========================================================
   KONTAKT – PERSÖNLICHE PROJEKTANFRAGE
   ========================================================= */

.contact-section {
    position: relative;
    overflow: hidden;
}


.contact-section::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -210px;

    width: 580px;
    height: 580px;
    border-radius: 50%;

    background: rgba(184, 101, 66, 0.07);

    pointer-events: none;
}


.contact-editorial {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);
    gap: clamp(65px, 8vw, 125px);
    align-items: start;
}


.contact-editorial > * {
    min-width: 0;
}


/* =========================================================
   LINKE KONTAKTSEITE
   ========================================================= */

.contact-editorial-intro {
    position: sticky;
    top: 120px;
}


.contact-editorial-intro h2 {
    max-width: 620px;

    font-size: clamp(36px, 3.3vw, 49px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}


.contact-editorial-intro > .lead {
    max-width: 610px;

    color: var(--ink);

    font-size: clamp(19px, 1.45vw, 22px);
    line-height: 1.6;
}


.contact-editorial-intro > p:not(.eyebrow):not(.lead) {
    max-width: 620px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.72;
}


/* ---------------------------------------------------------
   Kontaktperson
   --------------------------------------------------------- */

.contact-person {
    display: grid;
    grid-template-columns:
        74px
        minmax(0, 1fr);
    gap: 17px;
    align-items: center;

    margin-top: 34px;
    padding: 20px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.contact-person img {
    width: 74px;
    height: 74px;

    border-radius: 50%;

    object-fit: cover;
    object-position: center 25%;

    filter: saturate(0.9);
}


.contact-person strong {
    display: block;
    margin-bottom: 5px;

    color: var(--ink);

    font-size: 17px;
    line-height: 1.25;
}


.contact-person span {
    display: block;
    max-width: 390px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   Kontaktdaten
   --------------------------------------------------------- */

.contact-facts {
    margin-top: 24px;
}


.contact-facts > div {
    padding: 20px 0;

    border-bottom: 1px solid var(--line);
}


.contact-facts > div > span {
    display: block;
    margin-bottom: 7px;

    color: var(--copper2);

    font-size: 10px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.contact-facts a {
    color: var(--ink);

    font-size: 17px;
    font-weight: 750;
    line-height: 1.4;

    transition: color 0.2s ease;
}


.contact-facts a:hover {
    color: var(--copper);
}


.contact-facts p {
    max-width: 510px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   FORMULARFLÄCHE
   ========================================================= */

.contact-form-panel {
    padding: clamp(30px, 4vw, 52px);

    border-top: 5px solid var(--ink);

    background: var(--paper);
}


.contact-form-heading {
    margin-bottom: 36px;
    padding-bottom: 29px;

    border-bottom: 1px solid var(--line);
}


.contact-form-heading h2 {
    margin-bottom: 13px;

    font-size: clamp(30px, 2.7vw, 40px);
    line-height: 1.09;
    letter-spacing: -0.04em;
}


.contact-form-heading > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   FORMULARFELDER
   ========================================================= */

.contact-form-editorial {
    display: grid;
    gap: 24px;
}


.contact-form-editorial .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


.contact-form-editorial label {
    display: grid;
    gap: 9px;

    min-width: 0;
}


.contact-form-editorial label > span,
.contact-topic-fieldset legend {
    color: var(--ink);

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}


.contact-form-editorial input,
.contact-form-editorial select,
.contact-form-editorial textarea {
    width: 100%;
    min-width: 0;

    border: 1px solid rgba(7, 31, 34, 0.2);
    border-radius: 0;

    background: #fff;
    color: var(--ink);

    font: inherit;

    outline: 0;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


.contact-form-editorial input,
.contact-form-editorial select {
    min-height: 54px;
    padding: 0 15px;
}


.contact-form-editorial textarea {
    min-height: 145px;
    padding: 15px;

    line-height: 1.6;
    resize: vertical;
}


.contact-form-editorial input::placeholder,
.contact-form-editorial textarea::placeholder {
    color: rgba(43, 59, 61, 0.48);
}


.contact-form-editorial input:focus,
.contact-form-editorial select:focus,
.contact-form-editorial textarea:focus {
    border-color: var(--copper);

    box-shadow:
        0 0 0 3px rgba(184, 101, 66, 0.11);
}


/* =========================================================
   THEMENAUSWAHL
   ========================================================= */

.contact-topic-fieldset {
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;

    border: 0;
}


.contact-topic-fieldset legend {
    margin-bottom: 13px;
}


.contact-topic-options {
    display: grid;
    gap: 9px;
}


.contact-topic-options label {
    position: relative;

    display: grid;
    grid-template-columns:
        19px
        minmax(0, 1fr);
    gap: 13px;
    align-items: start;

    padding: 15px 16px;

    border: 1px solid rgba(7, 31, 34, 0.15);

    background: rgba(255, 255, 255, 0.62);

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.contact-topic-options label:hover {
    border-color: rgba(184, 101, 66, 0.55);

    background: #fff;

    transform: translateX(3px);
}


.contact-topic-options input {
    width: 17px;
    height: 17px;
    min-height: 0;
    margin: 2px 0 0;

    accent-color: var(--copper);
}


.contact-topic-options label > span {
    display: block;
}


.contact-topic-options strong {
    display: block;
    margin-bottom: 4px;

    color: var(--ink);

    font-size: 14px;
    line-height: 1.4;
}


.contact-topic-options small {
    display: block;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.55;
}


.contact-topic-options label:has(input:checked) {
    border-color: var(--copper);

    background: rgba(184, 101, 66, 0.07);
}


/* =========================================================
   DATENSCHUTZ
   ========================================================= */

.contact-form-editorial .check {
    display: grid;
    grid-template-columns:
        18px
        minmax(0, 1fr);
    gap: 11px;
    align-items: start;

    padding-top: 3px;
}


.contact-form-editorial .check input {
    width: 17px;
    height: 17px;
    min-height: 0;
    margin: 2px 0 0;

    accent-color: var(--copper);
}


.contact-form-editorial .check span {
    color: var(--muted);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
}


.contact-form-editorial .check a {
    color: var(--ink);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   ABSENDEN
   ========================================================= */

.contact-form-submit {
    display: flex;
    gap: 20px;
    align-items: center;

    margin-top: 4px;
    padding-top: 26px;

    border-top: 1px solid var(--line);
}


.contact-form-submit p {
    max-width: 340px;
    margin: 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .contact-editorial {
        grid-template-columns: minmax(0, 1fr);
        gap: 52px;
    }


    .contact-editorial-intro {
        position: static;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 0.65fr);
        gap: 25px 55px;
    }


    .contact-editorial-intro .eyebrow,
    .contact-editorial-intro h2,
    .contact-editorial-intro > .lead,
    .contact-editorial-intro > p:not(.eyebrow):not(.lead) {
        grid-column: 1;
    }


    .contact-person,
    .contact-facts {
        grid-column: 2;
    }


    .contact-person {
        grid-row: 1 / span 3;

        margin-top: 0;
    }


    .contact-facts {
        margin-top: -12px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .contact-editorial {
        gap: 40px;
    }


    .contact-editorial-intro {
        display: block;
    }


    .contact-editorial-intro h2 {
        font-size: clamp(30px, 8.2vw, 38px);
        line-height: 1.09;

        overflow-wrap: normal;
        hyphens: none;
    }


    .contact-editorial-intro > .lead {
        font-size: 18px;
    }


    .contact-person {
        margin-top: 29px;
    }


    .contact-facts {
        margin-top: 21px;
    }


    .contact-form-panel {
        margin-inline: -20px;
        padding: 30px 20px 33px;
    }


    .contact-form-heading {
        margin-bottom: 29px;
        padding-bottom: 23px;
    }


    .contact-form-heading h2 {
        font-size: 30px;

        overflow-wrap: normal;
        hyphens: none;
    }


    .contact-form-editorial {
        gap: 21px;
    }


    .contact-form-editorial .field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 21px;
    }


    .contact-topic-options label {
        padding: 14px;
    }


    .contact-topic-options label:hover {
        transform: none;
    }


    .contact-form-submit {
        display: grid;
        gap: 13px;
    }


    .contact-form-submit .button {
        width: 100%;
    }


    .contact-form-submit p {
        max-width: none;
    }

}